Testing mobile designs
Jamie Shuey avatar
Written by Jamie Shuey
Updated over a week ago

When testing mobile interfaces you may want to ensure test participants are getting as close to a real-world experience as possible. For this use case, Lyssna provides device frames. Device frames present your design as it would appear on a mobile device by wrapping it in a mock device container when viewed on desktops and ensuring your design is flush with the screen on mobiles and tablets.

Device frames are available when adding the following types of test sections:

  • First-click tests

  • Five-second tests

  • Design surveys

  • Preference tests

  • Navigation tests

Device frames cannot be added to prototypes from within the test builder like other tests. If you would like to add a mobile device frame to your Prototype, you can enable this in your prototype's settings within Figma. Add a mobile device frame to your Figma prototype.

If your design extends past the dimensions of the device frame we will resize it and allow vertical scrolling to emulate the behavior participants would experience on a real device. We currently support device frames for iPhone, Android, and tablet devices and you can select either portrait or landscape orientation.

If you would prefer to limit your test to participants using a real mobile handset, you can use device targeting instead.

How to use a device frame

  1. Upload your file(s) to a test section

  2. Select the frame to use (iPhone, Android, or Tablet) under the Display style dropdown

If you are using a device frame, these are some optimal dimensions that you can use to make the scaling work nicely or to fit an image exactly within the frame without scrollbars:

Device

Optimal image dimensions

Android

490x870px

iPhone

450x804px

Tablet

952x1267px

Did this answer your question?