Новый фреймворк Apple для продуктовых страниц

И вот, 23 апреля и 18 мая компания Apple вводит в эксплуатацию две новые посадочные страницы для продуктов: iPhone 12 и iPhone 12 Pro. Это привело к проблемам: усложнению и запутанности в desktop и mobile навигации, а также рассинхронизации в локализованных версиях.

В своем педантичном желании ответить на мем-вопрос «Что ты, черт возьми такое?» я создал по-экранную декомпозицию двух продуктовых страниц iPhone 12 (старой и новой), включающую ключевые кадры анимаций. Проект доступен в miro.

Детальное рассмотрение нового фреймворка продуктовых страниц дает много ответов. Поехали разбираться что к чему.

Суть нового фреймворка отлично передается меме

Листать стало легче, листать стало веселее:

• длина страницы стала в 4 раза короче
• тексты сократилось до заголовков
• сообщения стали концентрированнее и smart
• статические иллюстрации заменили видео и сложные параллакс анимации
• пропали «пустые» пространства создающие объем
• появилась «вложенность» — pop-up
• стандартизации подачи информационных блоков раздела «Бенефиты»
• появилась визуальная идентичность и стандартизация в повествовании

Новые станицы имеют адресацию «…/key-features/».

Для мобильной версии .com сайта, они заменяют старые. В desktop версии, в зависимости от точки входа, доступны и старые и новые версии продуктовых страниц. Скрипт повествования у обеих версий остался тем же. Именно по этой причине новые станицы я рассматриваю как новый фреймворк взамен старого, а не дополнение.

1. скрипт

Ушел открывающий анимированный «Тизер». Стартовый экран встречает нас, единственным многобуквием с перечислением бенефитов. Фичи перенесены в pop-up. CTA дублируется в теле страницы. В остальном, все по прежнему. Скрипт:

— Заголовок / имя продукта

— Основные бенефиты тезисно

— Бенефит 1

—— фича 1

—— фича 2

—— фича 3

— Бенефит 2

—— фича 1

—— фича 2

—— фича 3

.

— Дополнительные особенности

— CTA

— Дополнительные предложения сопутствующие продукту

* Я использую термин «Бенефит», как то, что описывает результирующую выгоду/ценность, которую получает клиент. А «фичи» — как то, что обеспечивает получение этого бенефита. Так, исторически Apple описывает тезисы. Не всегда это очевидно, и последнии копирайты смахивают на фичи, но это уже диалектические тонкости. Вот пример копирайта со страницы посвященной новому iMac. В качестве бенефитов здесь — «...the best of...», «...in any space», «...into your life»

2. графический «вес»

Раздел бенефитов сократили до перечня с использованием карточек. Их стандартизированы по форме и по объему занимаемого места, отчего раздел стал считываться быстрее и в полном объеме, получил «границы» из за визуальной отстройки от иных разделов.

Это решение отразилось на заголовках. Они стали статичными, информативнее и менее косноязычным.

Привет: меняющийся при параллаксе заголовок одного из разделов « Big news» переходил в заголовок «Big news. Mini news.» На новом сайте этот раздел именуется проще «Two just right sizes».

3. «многабукв!» — иди в pop-up

Описания «фич» каждого бенефита перенесены в pop-up. Его реализация не стандартна: один pop-up на все бенефиты, с открытием подраздела на соответствующем якоре.

Каждый такой подраздел дублирует заголовок с карточки бенефита, но имеет уникальное изображение. Описание фич максимально сокращено и стандартизировано — 4-6 пунктов.

В такой формализованной структуре Apple снижает акцент на возможностях камеры сокращая объём описания, но оставляет его разнятся на 2 блока и выделив один цветом. Где цветовое кодирование в темный соответствует контенту.

4. дополнительные особенности

Дополнительные особенности сокращены и переведены в один блок — «серый» блок рекламных слоганов. Расширенной информации по этим пунктам в Pop-up’е нет.

5. CTA

CTA теперь на своем законном месте — в теле страницы, а не только кнопка на закрепленном баре. Также CTA дублируется в pop-up’е из за особенностей его реализации.

С 2007 — это первый прецедент, когда компания меняет продуктовые страницы в середине жизненного цикла. Вероятно, это зона экспериментов новой команды.

Мне сложно сказать в каком виде новый фреймворк Apple будет использоваться дальше: будет он единым для разных разделов и типов устройств, будет ли разделение на 2 версии для mobile и desktop?

В блоке CTA в новой версии есть переход на оригинальную версию страницы посвященную продукту. И разделение контента на контекст потребления выглядит обоснованно, но это «столько» работы по созданию нескольких версий и путанницы в навигации.

Я работаю с фреймворком Apple для продуктовых страниц пять лет. Первый большой проект сделал в 2018, полностью обновив сайт mtt.ru. О результатах изменений писали в кейсе.

Знакомство с новым фреймворком пришлось на создание моего нового проекта «Аморальный Digital: лекторий». Я потратил в три раза больше времени на доработку лендинга под новые лекала, зато актуализировал мат. часть для одной из лекций.