Good mobile navigation is a challenge to establish due to the limitations of the small screen and the need to prioritise content. It is, however, crucial to maintain clear navigation so that users know how to move around your app. Mobile design trends in 2019 are all about creating a ‘sleek, fluid, and concise user experience’. I, therefore, set about creating an Open Source UI library for iOS that was easily configurable, reusable and customisable to save time in the future.
There’s no need to write the same component over and over again!
Introducing Pager. My brand new Open Source library designed to enhance mobile navigation.
Pager is a UI component that breaks down complete datasets into smaller parts, thus allowing you to provide menu tabs to each part. As you can probably gather, this pattern is inherited from traditional desktop design. However, Pager contains more destinations than the typical TabBar pattern.
These destinations shouldn’t be accessible from every point of the app, despite being of similar importance. Pager allows developers to sort through different items of the same family to provide clean pagination control. Using actions such as swiping or through the top menu navigation for clarity, it allows users to browse from page to page with ease.
It’s thus best used when it is unsuitable to display all the data on a single page/screen.
Pager reduces the perceived complexity by parting large datasets into smaller chunks that are more manageable. Merely having to return subsets of the overall data also achieves a significant upgrade in technical performance.
Pagination controls convey information to the user about how big the dataset is and how much is left to view. It thus gives users a break from scanning the contents of the dataset, allowing users to determine if they wish to continue looking through more data or instead navigate away from the page. This is also why pagination controls are most often placed below the list.
That’s a brief introduction to my brand new Open Source UI library, Pager, designed to solve navigation issues and save developers’ time. Do you think it’s a useful tool? What are your top iOS Open Source UI Libraries and why? Tweet us at @WeAreMobile1st and we’ll retweet your responses. In the next post in the series, I’ll explain why we should Open Source our libraries.
We Are Mobile First is a digital product agency based in Barcelona. Follow us on Twitter, LinkedIn or Medium to be notified of our future posts and company updates. We share weekly posts on everything from how to improve your iOS app’s performance to how to build an image classifier app with Apple’s Core ML.
Data (images and descriptions) for the example app was taken from this Air Jordan article on ESPN.