PanModal: Better support for thumb accessibility on Slack mobile

When the App Store first arrived, designing an iOS app was a straightforward process; you only had to worry about how the app would look and operate on a single device. But as the iPhone evolved, variations in screen sizes were introduced and it became a challenge to maintain consistency across devices whilst making efficient…

Slack logo
Slack
•
Stephen Sowole
•9 min read•intermediate•
--
•View Original
ChefModal

Overview

The article discusses the development of PanModal, a solution designed to enhance thumb accessibility in the Slack mobile application. It highlights the importance of user interface design tailored for thumb reachability and details the collaborative efforts between design and engineering teams to create an effective user experience.

What You'll Learn

1

How to design user interfaces that accommodate thumb reachability

2

Why thumb accessibility is crucial for mobile app usability

3

How to implement custom modal transitions in iOS using UIViewControllerTransitioning

Prerequisites & Requirements

  • Understanding of iOS development and UIKit
  • Familiarity with Git for version control(optional)

Key Questions Answered

What is PanModal and how does it improve accessibility?
PanModal is a custom modal solution developed for Slack's mobile app to enhance thumb accessibility. It allows users to access frequently used actions within the optimal thumb reachability zones, improving overall usability for mobile users.
How does thumb reachability affect user experience on mobile devices?
Thumb reachability significantly impacts user experience as it determines how easily users can interact with app features while holding their devices. By designing interfaces that consider thumb movement zones, developers can create more user-friendly applications.
What challenges did Slack face in designing for thumb accessibility?
Slack faced challenges in ensuring that frequently used actions were within easy reach of users' thumbs. Many actions were initially placed outside the natural thumb movement zones, necessitating a redesign to improve accessibility and user comfort.
How did Slack implement custom modal transitions for better user experience?
Slack implemented custom modal transitions using UIViewControllerTransitioning, allowing for a more fluid presentation of modals. This approach enabled the team to create a draggable modal that keeps primary actions within easy reach while providing access to secondary actions through gestures.

Technologies & Tools

Backend
Uiviewcontrollertransitioning
Used to customize modal transitions in iOS applications.

Key Actionable Insights

1
Incorporate thumb reachability principles into your mobile app design process.
By understanding the zones of thumb reachability, you can prioritize the placement of key actions within the green and yellow zones, ensuring a more accessible user interface.
2
Utilize UIViewControllerTransitioning for custom modal presentations in iOS applications.
This approach allows for greater flexibility and control over modal animations, improving the overall user experience by making interactions more intuitive.
3
Engage in cross-disciplinary collaboration between design and engineering teams.
Working together can lead to innovative solutions that enhance user experience, as seen with the development of PanModal at Slack.

Common Pitfalls

1
Failing to consider thumb reachability can lead to a frustrating user experience.
When key actions are placed outside of comfortable reach, users may struggle to interact with the app, leading to decreased satisfaction and usability.
2
Overcomplicating modal transitions can hinder performance.
It's essential to maintain smooth animations and responsiveness; overly complex transitions can lead to lag and a poor user experience.

Related Concepts

User Interface Design
Mobile App Accessibility
Gesture-based Interactions