So, I'm wondering if there is a design pattern that counts for the usage of a phone protector/case.

Recently I noticed a new employee use an application we just launched, he was using a protector/case around his phone. This limited the space you could use just by a small bit. However this small bit had a fairly large impact on the slider usage, it just became a bit uncomfortable to select the last option.

So my question is, is there a design pattern for the use of phone protectors/cases or do you just manually test it (To be honest it never occurred to me to include this in my designs)

  • 2
    A related problem is the newer phones that have glass that curves around the edges. Looks fantastic but severely limits options for functional (i.e., drop-resistant) cases because you have very little area where you extend the case even a few mm in front of the glass to keep the glass from hitting the ground with every fall. – manassehkatz-Moving 2 Codidact Dec 12 '18 at 16:10
  • Similar to games consoles, where you aren't allowed to put important UI content near the edge of the screen, since the user's TV may be setup incorrectly – bace1000 Dec 12 '18 at 18:53
  • 1
    @manassehkatz Such phones are as annoying (to me) without a case... even with a non-edge version, the borders have been reduced so far that you have to be careful how you hold a phone without accidentally triggering some edge-of-screen icons in some apps/games. To OP: if you can afford not to use the space, leave a small "margin/dead zone" along each long edge. – TripeHound Dec 13 '18 at 11:02

There is no design pattern to cater for those that buy and use restrictive cases, and there shouldn't be because the OS makers are deliberately relying on edge-begin gestures.

Read the Apple and Google design guides.

Pay particularly long and dutiful attention to the sections on edge gestures.

These are the phone makers. They deliberately created gestures that begin at the edge of the screen.

Their phones operate at all angles. The gestures move with the changed orientation.

Some of the most important operations require this edge-begin swipe. Control Panel, for example, on new iPhones.

IOW: The case makers are beholden to the OS input mechanisms, and they go all the way to the edge of the glass.


We faced similar issues while testing our mobile game. We learnt the following:

The presence of scrollbar did not matter User with screen protectors of the heavier version of otter box quickly realize that their action are reducing full visibility. Tend to quickly test feature likes scroll, even if the page does it offer scroll.

Visibility of icons The game we were testing had a scorer card on the top right corner and that was clearly been impacted. Further testing we realized, it should not be there in the first place because it does not provide the impact it should. We also increased the size of icons used on edges.

I could not find any pattern and I can see why. Unless your team has a user research section, such issues do not get noticed or even thought about.

So designers should be cognizant of using the edge of the screens wisely.


I have always used heavy cases such as Otterbox and Lifeproof

The only impact they've had on usability in apps is grabbing the tiny scrollbars on the edge of the screen for fast scrolling across huge lists, for example down to a certain letter in my contacts or down to a certain date in my photos.

I would recommend a larger touch zone for the slider, and just be wary of placing fine controls near the screen bezel. The cases generally don't obscure visibility, but interaction is more difficult.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.