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, UsabilityHub 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.
If your design extends past the dimensions of the device frame we will resize it and allow vertical scrolling to emulate the behaviour 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
Upload your file(s) to a test section
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 |