Designing Mobile App Prototypes

# CHAPTER 5

Designing Mobile App Prototypes #

1. Introduction #

A desktop computer uses a precise, 1-pixel mouse cursor and a physical keyboard. A mobile phone uses blunt thumbs, physical device rotation, and complex multi-touch gestures. If you design a mobile app prototype that only relies on simple "point and click" interactions, it will feel like a clunky website shoved onto a small screen. True native mobile applications possess a specific, fluid "physics." In this chapter, we will master Designing Mobile App Prototypes. We will abandon the "On Click" trigger in favor of Swipes, Drags, and Long Presses. We will learn how to engineer "Fixed" UI elements to create sticky Bottom Navigation bars, and utilize specific transition animations to replicate the spatial architecture of iOS and Android.

2. Learning Objectives #

By the end of this chapter, you will be able to:

• Implement Mobile-specific Triggers (On Drag, While Pressing).

• Prototype horizontal "Swipe" interactions (Carousels and Tinder-style cards).

• Pin UI elements to the screen to create Fixed Bottom Navigation Bars.

• Utilize "Push/Slide" transition animations to establish spatial hierarchy.

• Optimize prototype settings for presentation on actual physical devices.

3. The Physics of Mobile Transitions #

On a desktop website, clicking a link usually causes the page to load instantly. On a mobile app, screens physical move across the glass.

• The "Push" Transition: When a user taps a product on a mobile list, the new Product Detail screen should animate by sliding in from the Right, pushing the old screen off to the Left.

• *The Spatial Psychology:* This animation tells the user's brain they are moving "forward" or "deeper" into the app.

• The "Back" Transition: When the user taps the back arrow, the screen must reverse the animation (Sliding out to the Right). This confirms they are moving "backward" up the hierarchy. *Using the wrong transition direction completely disorients the user.*

4. Gestures (Beyond the Click) #

Mobile interfaces rely heavily on gestures. Figma allows you to simulate these flawlessly.

• On Drag: Used for horizontal swipe carousels (like Netflix movie rows) or interactive maps. You link the UI element, set the trigger to On Drag, and Figma automatically tracks the user's thumb movement to execute the transition.

• While Pressing (Long Press): Used for advanced interactions (e.g., holding down on an Instagram icon to see a preview).

• *UX Rule:* Gestures are invisible. You cannot "see" that you can swipe a card. Therefore, gestures must be *discoverable*. (e.g., letting the edge of the second card peek onto the screen to hint that horizontal swiping is possible).

5. Fixed Elements (Sticky UI) #

The defining characteristic of a native mobile app is that the Top Header and the Bottom Navigation Bar stay locked in place, while the content in the middle scrolls underneath them.

• The Failure: If you do not fix the navigation bar, it will scroll off the top of the screen, and the user will have to scroll all the way back up to find the menu.

• The Figma Fix (Fix Position): In Figma, you select your Bottom Navbar component, go to the right panel (Design or Prototype), and check the box that says "Fix position when scrolling."

• You must also ensure the element is layered at the absolute top of the Z-index (brought to front), so the scrolling content slides *behind* it, not over it.

6. The "Scroll To" Interaction #

Mobile pages are often very long vertical stacks. Sometimes, you want a button at the top to instantly jump the user down to a specific section on the same page.

• The Action: Instead of Navigate To, you select Scroll To.

• You then select the specific text block or UI card further down the page. When the user taps the button, the prototype smoothly auto-scrolls down to that anchor point.

7. Diagrams/Visual Suggestions #

*Visual Concept: The "Push" Spatial Hierarchy* Provide a 3-step visual diagram illustrating mobile transitions.

• Step 1: An iPhone showing a List of Emails. Arrow points Right.

• Step 2: A new screen (An Open Email) slides in from the Right edge, covering the list. Label: "Forward Navigation (Push In)."

• Step 3: A 'Back' arrow points Left. The Open Email screen slides away to the Right, revealing the List again. Label: "Backward Navigation (Push Out)."

This visual teaches the critical directional logic of mobile OS architecture.

8. Best Practices #

• Mirroring to a Real Device: Never finalize a mobile prototype by only testing it with your mouse on a computer monitor. A mouse is too precise. Download the Figma App on your actual iPhone or Android device, open the prototype, and test it with your actual thumb. You will instantly realize if your buttons are too small or your swipe gestures are unnatural.

9. Common Mistakes #

• Hiding Content Behind the Keyboard: A designer prototypes a beautiful Chat interface. When the user clicks the text input box, a simulated keyboard pops up from the bottom of the screen. *The Failure:* The designer forgot that the keyboard takes up 50% of the screen. The keyboard covers the "Send" button and the most recent messages. *The Fix:* Always account for the physical space of the native mobile keyboard when prototyping input flows.

10. Mini Project: Build a Sticky Bottom Navigation App #

Let's engineer a native app feel.

1. 1. The Canvas: Draw an iPhone frame [Home_Screen]. Make it extremely tall vertically (e.g., 1500px high) to force scrolling. Fill the middle with random gray boxes.

1. 2. The Top Bar: Draw a white rectangle at the top with a Logo. Check the box: Fix position when scrolling.

1. 3. The Bottom Bar: Draw a white rectangle at the bottom with 4 icons. Move it to the bottom of the iPhone frame line. Check the box: Fix position when scrolling.

1. 4. Z-Index Check: Ensure both the Top and Bottom bars are at the very top of your layers panel list (Bring to Front).

1. 5. The Test: Hit Play. Click and drag your mouse to scroll down the page. The gray boxes will scroll, but your Header and Footer will remain perfectly anchored to the glass, exactly like a real coded application.

11. Practice Exercises #

1. 1. Explain the UX psychology behind transition directions on a mobile app. When navigating "deeper" into a category (e.g., from a list of shoes to a specific shoe details page), from which direction should the new screen animate in, and why?

1. 2. Define the purpose of the "Fix position when scrolling" setting in a prototyping tool like Figma. Give an example of a specific Mobile UI component that absolutely requires this setting to function correctly.

12. MCQs with Answers #

13. Interview Questions #

• Q: A client tests your mobile prototype on a desktop computer using a mouse and loves it. When they test it on their actual iPhone, they complain that they keep accidentally opening the wrong menus when scrolling. Walk me through the ergonomic difference between mouse and touch inputs, and how "Mirroring" prevents this failure.

• Q: Explain the UX danger of relying entirely on complex, invisible gestures (like a two-finger swipe or a long-press) as the primary way to navigate a mobile application prototype. How do you solve the "Discoverability" problem?

• Q: Walk me through the exact Figma layers and settings required to create a "Sticky Bottom Navigation Bar" that floats above scrolling content on a mobile app prototype.

14. FAQs #

Q: Can I prototype the native iPhone "Swipe Back from Edge" gesture? A: Yes! In Figma, you can draw an invisible interactive hotspot (a transparent rectangle) along the absolute left edge of the phone screen. Set the interaction to On Drag -> Navigate To -> Previous Screen with a Push Right animation. It will perfectly mimic the native iOS swipe-back physics.

15. Summary #

In Chapter 5, we abandoned the physics of the desktop and embraced the tactile, spatial architecture of the smartphone. We transitioned from simple clicks to complex, physics-based gestures like Swipes and Drags, aligning our prototypes with the physical expectations of the human thumb. We mastered the spatial psychology of navigation, utilizing directional "Push" transitions to subconsciously communicate depth and hierarchy to the user. We engineered Native App realism by fixing headers and bottom navigation bars to the glass, ensuring our simulations behave identically to coded software when tested in the palm of a hand.

16. Next Chapter Recommendation #

We have mastered the constrained mobile screen. Now, we must return to the expansive complexity of the desktop monitor to architect massive web applications. Proceed to Chapter 6: Website and Web App Prototyping.