Problem with screen getting cut off at the sides

[LennartMrt]

Hello everyone,

I'm currently part of a research team that utilizes the app and we have been confronted with a problem that we would need some advice for to solve.
The problem is as such:
Test participants that have a small display screen (specifically the smaller iPhone models like SE) can't really see the full app. Instead, the sides of it get cut off. (images are linked)

Obviously that doesn’t work for our study and we have been searching for solutions for a while with no avail.

If this can't get fixed then we would have to exclude participants with certain phone models, which would be the worst-case scenario.

Does anybody have any sort of advice on how to solve it or how this problem came to be?

Thanks a lot in advance!

Best regards,
Lennart

[JodliDev]

From what I can see on your screenshots, I am quite certain your problem is caused by the likert scales. The number of options you have added, just does not have enough space on small screens. This causes two issues:

• The likert scale itself is becoming too wide, causing some of the dots being outside of the screen (since they have nowhere else to go)
• Because the whole view is "stretched" by the likert scale, all other items suddenly also have more space available which they fill happily. This causes the other items being outside the screen as well. This is unexpected behaviour we might be able to fix by making sure items are clipped when they are too wide (not sure how easy that will be).

So the best quick solution on your end is: Just make sure your likert items have 7 or less options. Personally I would recommend that anyway. I am not sure how effective likert scales still are if they have too many options - especially on screens with limited size. If you want to give users more range, you might want to use a VAS scale instead?

In general, on ESMira side, I can think of several solutions we could implement to make sure that can not happen:

• Change the admin interface to make sure not more than 7 options can be entered. To me, this is the only solution that really make sense. But maybe someone else has a better suggestion.
• Just "squeeze" all items in, no matter how much space is available. This is not really possible. Apart from items needing a minimal area so people are able to click them, the design (and size) for the dots is set by the operating system and is not adaptable. So the dots would just end up on top of each other (we could create our own dots. But that would be a lot of work and I am not really seeing the benefit of it).
• Auto-wrap dots if there is not enough space. I don't think this is gonna be a desired solution. This would lead to a situation where the most right option would actually count less than the options on the second row. It would also mean, that the middle dot is off center (which I am sure will cause skewed response behaviours as well). It would also mean that people with different screen sizes would have items that look very different
• Show less items if there is not enough space. That would essentially mean that questionnaires from people with small screens can not be compared to others because they have different options. So that one is off the table.

[LennartMrt]

Thank you so much! That helped a lot and we got it fixed by changing the interface!

[SelinaDev]

Hi Lennart,

as Jodli already explained, this problem results from the longer Likert scales thas scale badly, especially on iOS. As a remedy for that we just introduced (or are about to introduce) the option of rendering Likert scales vertically. I tested this option with such an iPhone with small screen, and it did indeed work. Of course, that will cause the item (and therefore questionnaires using multiple of these items) to take up far more vertical screen space, thereby lenghtening the questionnaire page, which is why I would only recommend this where necessary. However, it does mean that such items will work, even on smaller screens.

Note on versions: The option in the admin interface will be introduced in ESMira-web 3.3.0, which is already available as alpha release, and for which I plan to move to a stable release either today or tomorrow (after that your server admin will need to update your server). The new versions of the client apps, which are capable of rendering the vertical scale are currently under review in their respective stores (older versions will simply ignore this option and render horizontally).