High-fidelity prototyes are the second iteration of the low-fidelity prototypes that you have tested earlier with users to get feedback on. So what is the difference? Low-fidelity prototypes – Interactive versions of designs that use content placeholders. High-fidelity prototypes – detailed, interactive versions of designs that closely match the look and feel of the final product. Or it is an interactive mockups that is the closest version to the launch product. What makes high-fidelity prototypes unique stands out are gesture and motion. Let’s explore and learn more about it.
Gestures
Guestures are any method of interaction that user has with information on their device using touch. In other words, guestures describe how you interact with a screen using your finger or a stylus. Common gestues include:
Swipe. A swipe is a brief movement with a fingertip or stylus across the screen, horizontally or vertically. For example, users often swipe from right side of a phone screen to the left, in order to move between screens of an app. It is also commonly used to interact with a carousel of content.
Tap. A tap is a brief touch of the screen by a fingertip or stylus. Taps can be customized from the use of one fingertip to four fingertips. Tapping with a single finger is often used to select an item on the screen. Tapping with two fingers like on Macbook touchpad, which function as the right click.
Drag. A drag is a tap-and-hold on the screen, continuing to press down while moving a fingertip or stylus across the screen. For example, moving item in and out of view in main notification menu on smart phones.
Pinch. A pinch is the movement of two fingers closing into each other or moving away from one another. A pinch allows users to scale items on a screen, like zooming in or out on a website, map, or photo.
Google’s Material Design offers guide with animations of gestures, which is worth exploring.
Gestures and operating systems
Operating systems determine the different gesture in the hardward or to be precised – interface. The two main dominant operations in smart phones are Apple’s iOS and Google’s Android. Apple’s iOS is based on the Human Interface Guidelines or HIG for short, while Android is based on Material Design. HIG and Material Design provide designers and developers with guidelines for the gestures used for their particular operating system. As designers, it’s our job to understand these guidelines, so we can create designs that are easy to use and that meet user’s expectations. For instance, to undo in iOS device, swipe three fingers from the right side of the screen to the left. To undo text on an Android device, tap and hold the text to select it, then press the delete key. It is importance to consider the differences as you create designs!
To ensure that your design meets right operating system guidelines, it is a good idea to test out your design across operating systems.
Motion
Motion is a way to animate static design elements to focus the user’s attention and tell stories. Motion can make apps and websites more engaging and easier to use, like drawing attention to the focal point of a website or seeing a menu disappear as you drag it closed.
Most of you might be familiar with the motion in the image above. By press-and-hold on an app icon, which causes all the apps on the home screen to enter “jiggle mode,” where the app icons shake and a minus symbol appears in the left-hand corner of each. This motion lets users know that they are able to edit the apps.
Pressing and holding in Android device, a menu of options appears for that app only. The motion is the bouncing slightly up and down as a reminder of which app’s setting are being edited. These are examples of how motion can help users interact with and understand the product they’re using!
To learn more with these two articles on motion:
- The Role of Animation and Motion in UX by Nielsen Norman Group or
Learn more on Figma features to use in your prototype:
Good Luck!
Scholar Journeys 