Feature job story
As someone who utilizes large dynamic type sizes on my device, I want to be able to clearly read labels and other navigational elements that cannot be scaled up in the UI to my desired type size, so that I can navigate with ease without content being obscured.
Why are we doing this?
We would like to utilize large content viewer more on toolbars and navigation bars that cannot scale so that users on the largest accessibility dynamic type sizes can still see what it says when long pressing. Ensure those icons are crisp and scale up well.
Design needs
- Define where and when we should utilize large content viewers in the app (does this differ on iPhone and iPad?)
- Audit of which elements we can/should support large content viewers for
- Compile a list of icons from audit
- Ensure that icons are available in appropriate sizes (Nav bar, action buttons on the Explore feed, etc)
Documentation from Apple
https://developer.apple.com/videos/play/wwdc2019/261/
Figma file
The audit is located in this Figma file under the 'Large content viewer audit' page.
Audit & designs
In the list below I will indicate where the large content viewer is unavailable but could be utilized for iPhone and iPad components. You can find the screenshots and proposed designs of these screens in the Figma file.
The large content viewer is unavailable for:
- (iPhone & iPad) The tab bar on the article page
- (iPhone & iPad) On buttons like the randomizer
- (iPhone & iPad) Under places, when you click on a specific location in map view, the share and save buttons do not show in large content viewer, and they do not increase in size.
- (iPhone & iPad) Enable location on the map under ‘Places’
- (iPhone & iPad) ‘Edit pencil’ on articles
- (iPhone) Long pressing the map and list view under ‘Places’ has uncommon behavior (the large content viewer is not really activated but the icons both appear slightly larger when you long hold only one of them)
Solution: Implement large content viewer for the elements that don’t have it. The content viewer should include an icon + label, where appropriate (for instance if it is just a button without an icon, then include only the label).