It’s possible to test mazes with users on mobile devices (i.e. smartphones and tablets). This article walks you through best practices to set up and successfully run mobile-friendly mazes.
Can Maze be used in native iOS or Android apps?
Although it's possible to test mobile prototypes, Maze doesn’t currently support testing your own live native (i.e. iOS or Android) apps.
If this is a requirement for your team, please share your feedback with us!
How can I test my mazes on mobile?
While native app testing is not currently supported, you can test mobile app designs using a prototype block. Learn more about prototype testing
To test on mobile, testers must open the maze share link on a compatible mobile browser. Learn more about Maze’s browser requirements
Maze doesn't have a dedicated mobile app for testing. However, you can use the Maze PWA for a more immersive testing experience. Learn more about the Maze PWA
Optimizing Figma files for mobile users
Screen width
Desktop prototypes are not supported in mobile tests.
If the screen width exceeds 1024px, users on mobile won't be able to open the maze. Instead, they will see the following error:
This page needs a larger screen
When testing on mobile, please ensure that the prototype screens are optimized for mobile devices.
Orientation
At the moment, we don’t support orientation changes (e.g. landscape to portrait) in Figma prototypes.
You should ensure that the orientation of your prototype is consistent throughout the test — always portrait, or always landscape.
File size
We use Figma's own embed feature so that your prototypes render exactly as they appear in Figma. This allows you to take advantage of many of their native features, but it also means that you may encounter issues when loading particularly large Figma prototypes or files in Maze.
Mobile testers in particular can struggle to open mazes associated with large Figma prototypes because of the relatively small amount of memory they have.
On iOS devices, the memory limits implemented by Apple may cause the test to time out and crash completely or you may be returned to the welcome screen repeatedly.
Keep in mind that Figma files can become quite large, either because they include multiple pages with lots of additional frames, or because the prototype frames are very large and/or contain high-resolution embedded PNGs. Files that are too large may lead to loading issues when importing prototypes as well as when testing.
For this reason, we highly recommend optimizing your Figma prototypes before importing them to Maze.
Learn Figma optimization best practices
Live website testing for mobile users
To test your website with mobile users, you'll need to choose Mobile when setting the device type. With this setting, your website window will open on a mobile resolution (420px). Mobile users will only be able to open mobile tasks, not desktop tasks.
Learn more about setting the device type on website tests
Previewing your mazes on mobile
Be sure to test your prototype on representative mobile devices before sharing the maze with your testers.
This is a best practice whenever using Maze, but it's particularly important if you anticipate they will be testing with a mobile device. If you know that your tester pool may be using older devices, test with the oldest iPhone available to you, to ensure that the maze works as expected from beginning to end.
To see how your maze will look like for mobile users, open the preview link on a mobile device.
Using Clips
When using Clips, please keep in mind that, due to technical restrictions, screen recording is not currently supported on mobile devices. Maze detects when your testers are using a mobile device, and disables screen recording for those testers.
Mobile testers will be prompted to allow/deny audio and camera recording, but screen sharing will automatically appear as disabled.
When viewing the results for mobile testers, we display the screens in the path taken by the tester. You will not see the actual interactions. This is not a true screen recording, since those are not supported. In such cases, you will see the following warning on the Results page:
Tester screen is being simulated
Hiring from the tester panel
If hiring testers from the Maze panel, you can specifically target testers on mobile phones and/or tablets.
Learn more about the targeting filters
Testing both mobile and desktop prototypes
You can currently only link one prototype per maze. As a result, we recommend creating separate mazes for mobile and desktop.
While we don’t currently support screening questions, you can either use a third-party panel provider to do the screening, or use conditions to route your participants to the correct maze based on the device they’re using.
To use conditions to reroute your testers, you’ll need to set up two separate mazes, one containing the desktop prototype, and the other containing the mobile prototype.
The basic setup should look like this:
- Screening question: Add a first block containing a multiple-choice question: Are you currently on a desktop or mobile device?
- Conditional routing: Add a condition to this block: if the tester replies “Mobile”, they can continue the test. On the other hand, if the tester replies “Desktop”, jump to the Thank You screen.
- Link redirection: Add a redirect link from the Thank You screen rerouting desktop users to the Desktop maze. You can either embed the link in the Thank You message, or add a redirect button.
Please note:
- Desktop users can test both desktop and mobile prototypes. However, mobile users can only test mobile prototypes. If a tester on mobile opens a maze linked to a desktop prototype, they will not be able to run the maze, and instead will see an error "This page needs a larger screen". For this reason, if using this workaround, it is important to send out the maze with the mobile prototype first.
- Keep two separate design files for mobile and desktop, to ensure a lightweight testing experience. Learn more about optimizing your files
- We don’t recommend using this workaround if you’re using the Maze tester panel. Testers from our panel are entitled to compensation for participating. If you exclude hired testers from completing your test using this method, you must pay for each tester session.
- It's not currently possible to add multiple Thank You screens. For that reason, you should phrase the messaging to make it clear that only desktop testers should click the redirect button.
Interacting with a mobile test
Prototype instructions on mobile
At the beginning of a prototype test on a mobile device, a panel with the task controls is displayed at the bottom.
To hide the panel in order to see the full screen, click Hide instructions.
Ending a prototype task on mobile
If testers get stuck after starting the task, clicking the Show instructions button () at the bottom left of the screen will reveal the instructions again, as well as the Stop task button.
Ending a live website test on mobile
Unlike prototype tests, on a website test, the mission does not end automatically when the tester reaches the success screen (i.e. the final screen in a path), and a success message will not be displayed.
When the tester believes they've completed the task, they should click End task in the floating modal at the bottom in order to end the mission and return to the maze.
Still need help?
If you have any questions or concerns, please let our Support team know — we'll be happy to help!