Changes to iOS 14 Product Pages

October 20, 2021

The release of iOS 14 has generated considerable discussion across the mobile app ecosystem. We've seen big changes (now delayed) to the IDFA and a new lease of life for homepage screenshots with the release of widgets. There's also been other significant ASO changes including proper handling of misspellings in App Store search.

Whilst things have been pretty quiet on the Product Page with this software release, Apple have made a small, but significant, change to the 'app info' section. In this blog we'll go into a little detail about this app info section, how it behaves and how we implemented.

So what exactly has changed on iOS 14 product pages?

Old iOS 13 App Info Bar
New iOS 14 App Info Bar

As you can see, Apple have made a big change to the App Info Bar:

  1. It's now scrollable
  2. Whilst the old App Info Bar only contained reviews information, editor's choice badge (if applicable), category ranking (if applicable) and age rating, the new App Info Bar contains additional sections previously only found in the 'Information' section at the bottom of the page.

The items that can appear in the new App Info Bar (in the order in which they appear):

  1. Ratings
  2. Awards (Seems to be Editor's Choice only - not Apple Design Awards)
  3. Age
  4. Category ranking
  5. Developer
  6. Language
  7. Size

The new swiping interactivity of the App Info Bar makes it more obvious that all of of these sections are clickable. This was the case for previous iterations, thought it was very subtle. Here's what happens when you press each one: 

  1. Ratings -> Scrolls to 'Ratings and Reviews' section
  2. Awards -> Scrolls to 'Ratings and Reviews' section (with Editor's Choice section visible)
  3. Age -> Scrolls to 'Information' bottom section with Age expanded
  4. Category Ranking -> Opens the full ranking view for that category
  5. Developer -> Opens the 'Developer' page
  6. Language -> Scrolls to 'Information' bottom section with language expanded
  7. Size -> Scrolls to 'Size' bottom section with Age expanded

With iOS 14 it's more obvious that tapping on the App Info Bar will navigate users to new sections of the product page


One additional new detail that Apple have implemented is the ability to add your developer logo in the App Info Bar - this isn't so widely utilised right now but for sure adoption rates will increase, notice the difference between ustwo games and Tencent:

Apple now pulls in the developer logo if it's available
But not all developers are using it

When's it coming to ASO Giraffe?

Now! Users who visit our ASO Giraffe pages on iOS 14 will see the new App Info Bar. We detect whether visitors to the page are on iOS 14 and show them the new App Info Bar, all other versions will see the old implementation.

We keep a microscope on the App Store to ensure that the users' experience on the page is as close as possible to the actual pages. This way you can be sure that you can transfer the learnings over to your real product page when you need to.

So how will this affect user behaviour on Product Pages?

So what kind of interactions do we expect users to have with this new App Info Bar?

With an increased focus on interactivity and more obvious behaviours for interacting with the App Info Bar, we might expect that: 

  1. Users will explore the App Store pages more - scrolling to reviews will be more accessible and so users will end up scrolling further and seeing more of their pages.
  2. There'll be more 'leakages' in the page, where users can leave to visit the developer screen, the chart rankings and so on.

Are these realistic? At ASO Giraffe we are pretty skeptical. We believe this change won't impact behaviour much. An example we point to is how many users currently visit the 'view more' part of the long description. This is a much more obvious CTA, yet we only see 2% of users visiting across all the tests we've run. We don't expect the App Info Bar to create a material difference in the way the majority of first-time visitors experience the Product Pages.

Nevertheless, we've instrumented our version with analytics, and we'll follow up with the performance once we have more information!

Our implementation

Recreating the App Info Bar presented some difficulties for ASO Giraffe. Whilst it looks at the surface like a pretty simple interaction, there were a few things that add complexity:

Some section widths are dynamic

The widths of certain sections aren't always the same. For the category section and the developer section, if the text contained inside is long, the section will dynamically expand. This meant that we needed to model a few distinct examples

Example of different App Info Bars in Figma

We modelled a variety of different cases - using stitched together screenshots of the full App Info Bar (right) and overlaying it on our actual designs (left). We overlaid the screenshots onto our actual designs at 50% opacity to make sure ours were pixel perfect. We then did that again at the development stage to be extra sure that our designs have been represented faithfully on the pages.

Interaction behaviour

We also needed to implement the interactions that users can have on the App Info Bar. We made a decision to not allow the routing visitors to other pages from within the spoof pages - so the category ranking and developer buttons we decided to omit from our implementation. Otherwise we faithfully adapted the interactions for all other sections.

Analytics

Our mission is to provide our customers with as much information about visitor behaviour on their product pages as we can. So we treated this with the same approach we have for the rest of our pages. We wanted to understand how far users are scrolling on the App Info Bar and when they interact with the pressable elements. We added comprehensive analytics to this section (which is accessible to users from their data exports) and we'll follow up with an analysis on user behaviour when we have a bit more data.

Hope you enjoyed this look into the App Info Bar! If you have any questions please don't hesitate to get in contact with us.