For many years, Twitterrific on iOS used a relatively simple custom presentation for modal popup views such as conversation threads and profiles. With the release of iOS 13, Apple changed the design of standard modal popup views to have a more card-like appearance and behavior.
With this change, our custom popups still worked, but they didn’t feel like they fit in anymore. The native iOS 13 popups have a bit of bounce when dragged, a new size, they stack visually, and have a different background fade.
Rather than trying to duplicate all of this behavior in our own custom presentation code, we removed it all and used the native functionality instead. In short order, the app was looking refreshed and more modern – but there was a problem: the new modal popups were harder to dismiss.
Our prior presentation system had several handy ways to dismiss the popups, including tapping or swiping down in the space outside of the view, swiping down from the popup’s title bar, or swiping back from the edge of the screen.
Apple’s default allows you to swipe down and easily dismiss from anywhere in the panel – but only if the content doesn’t scroll or is pinned to the top. There is no support for tapping to dismiss or swiping down in the area outside of the popup.
To make matters worse, if the popup view needs to support pull-to-refresh, it has to disable that nice swipe-down dismissing gesture or else it’s impossible to actually pull down when you want to refresh!
That leaves only two ways to dismiss a standard popup when using pull-to-refresh: swipe down from a nav bar or title bar in the popup or a close button. Both of those approaches involve reaching to the top of your screen, which is not an easy feat if you have a large phone and small hands!
Our loyal customers have enjoyed our easy-to-dismiss popups for years. While the new ones looked and fit in better, they were also a significant usability regression. We weren’t happy about that and decided we needed to address the problem.
After considering several design options, including a close button at the bottom of all popup views, or ensuring there was always a bit of stable chrome somewhere low enough to grab, we eventually arrived back where we originally started: the popups just needed some better gestures!
Our solution turned out to be relatively simple: we added two additional gesture recognizers to the presentation controller’s container view after our popup view controller has appeared. When active, these gestures modify the container view’s position to provide the live interaction feedback.
The first gesture is a simple swipe-down on the background behind the popup which makes it easier for iPad users to dismiss the floating panels. The second is a back-swipe gesture that’s triggered at the edge of the screen. For the back-swipe interaction, we implemented a nice springy compression effect that feels right at home on iOS 13 – once you’ve swiped over enough, the standard view dismissal is triggered and the view animates down and to the right in a way that feels surprisingly natural.
Now that we’ve grown accustomed to these gestures in Twitterrific, it’s frustrating to encounter the less usable and more rigid native popups in other apps. We hope this post helps other developers implement a similar mechanism for dismissing modal popups. And who knows – maybe Apple will consider adopting it across the whole system!
