Редизайн раздела «Выберите устройство»

Приложение "Яндекс Музыка" имеет страницу "Выберите устройство", на которой отображается список колонок доступных для передачи музыки.

Каждый элемент списка состоит из миниатюрной одноцветной пиктограммы колонки и её названия.

Отмечу, подобное дизайн-решение применяется в ОС iOS ("AirPlay") и Android ("Chromecast").

Слева - меню выбора устройств для трансляции по "AirPlay" (iOS).

Справа - меню выбора устройств для трансляции по "Chromecast" (YouTube Music)

Несмотря на широкое распространение подобного UI и UX решения, оно не лишено недостатков.

Как и в случаях конкурентов, выбор колонки для трансляции музыки осложнён отсутствием цветного изображения устройства и информации о комнате, в которой оно находится.

Если список длинный, модели колонок имеют повторения (как на скриншоте выше: несколько Яндекс Станций Лайт, Мини, 2-го поколения, Макс), корректный выбор устройства для передачи музыки становится нетривиальной задачей.

Замена одноцветных пиктограмм на детализированные цветные изображения колонок может упростить их поиск и выбор. Ориентируясь на цвет, форму и размер изображения колонки, пользователь сможет быстро сделать правильный выбор.

Но возникает закономерный вопрос, а у пользователя все устройства одной модели и одного цвета (как на фото ниже)?

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

Однако текущий интерфейс этой страницы не подразумевает добавления такого количества информации. Замена пиктограмм на цветные изображения колонок отчасти облегчает поиск, но не решает основную проблему с точной идентификацией устройства (в частности - если у пользователя колонки одной модели и цвета).

Предлагаю обновить UI и UX этой страницы.

Начнём с изучения существующих продуктов Яндекса, которые могли бы стать основой для переработанного интерфейса.

Так как речь идёт в первую очередь о Яндекс Станциях (и других мультимедиа-устройствах с Алисой), стоит обратить внимание на интерфейс приложения "Умный Дом с Алисой".

В приложении "Умный Дом с Алисой" каждое устройство (в том числе Яндекс Станции) распределены по карточкам. В карточке есть цветное изображение и название устройства, а также - информация о комнате, в которой оно расположено.

Это удачное решение, так как количество карточек на странице может совпадать* с количеством элементов (устройств) в формате списка (прим. - формат списка используется на данный момент в приложении "Яндекс Музыка").

* (в зависимости от масштаба интерфейса ОС и размера шрифта)

Предлагаю заменить отображение списком на сетку (grid), состоящую из карточек устройств.

Пусть все мультимедиа-устройства (колонки) из учётной записи сервиса "Умный Дом с Алисой" будут находиться в разделе "Добавленные устройства".

Светлая тема:

Тёмная тема:

Не стоит забывать, что у пользователей могут быть колонки, которые они предпочитают выбирать для передачи музыки. Такие устройства можно добавить в разделе "Избранные устройства".

Светлая тема:

Тёмная тема:

Ещё в "Яндекс Музыка" есть возможность автоматического подключения к ближайшей колонке. Добавление раздела "Устройства поблизости" является продолжением развития этой функциональности.

Светлая тема:

Тёмная тема:

Предлагаю обозначить иерархию разделов.

Самым главным является раздел "Добавленные устройства". Если у пользователя есть колонки с Алисой, раздел не может быть скрыт со страницы.

Разделы "Устройства поблизости" и "Избранные устройства", в зависимости от предпочтений пользователя, могут быть отключены.

На странице могут быть разделы:

1. "Устройства поблизости", "Избранные устройства" и "Добавленные устройства"

2. "Устройства поблизости" и "Добавленные устройства"

3. "Избранные устройства" и "Добавленные устройства"

4. "Добавленные устройства"

Светлая тема:

Тёмная тема:

Кроме полного скрытия некоторых разделов (о них написано выше), стоит предусмотреть возможность сворачивать и разворачивать вложенные элементы.

Светлая тема:

Тёмная тема:

Но не у всех пользователей сервиса "Яндекс Музыка" есть мультимедийные-устройства с Алисой. Остаётся возможность транслировать музыку с помощью "AirPlay"/ "Chromecast" и "Bluetooth". Целесообразно добавление соответствующих кнопок на страницу.

Эти кнопки предлагаю разместить в начале страницы.

Светлая тема:

Тёмная тема:

Похожее решение применяется в приложении "Умный дом с Алисой" в разделе добавления устройств - это кнопки "Поиск Zigbee" и "Поиск Matter" (фото ниже).

Светлая тема:

Тёмная тема:

Теперь на странице "Выберите устройство" изменено отображение устройств, добавлены разделы "Устройства поблизости", "Избранные устройства" и "Добавленные устройства", а также появились кнопки "AirPlay" (или "Chromecast" на ОС Android) и "Bluetooth".

Функциональность существенно расширилась и название страницы не раскрывает её возможностей. Предлагаю переименовать страницу в "Источники звука".

Светлая тема:

Тёмная тема:

Сейчас "Выберите устройства" при активном музыкальном плеере открывается в компактном режиме (примерно на 40-50% от размера экрана).

Давайте обновим и компактное отображение!

Вот несколько вариантов мини-страницы "Источники звука" :

Светлая тема:

Тёмная тема:

Функциональность "Выберите устройство" претерпела качественные и визуальные изменения и была переименована в "Источники звука".

Предложенные нововведения основаны на существующих решениях сервисов Яндекса.

В рамках экосистемного бизнеса, вероятно они могут улучшить как взаимосвязь продуктов, так и пользовательский опыт.

Примечания:

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

В случае вопросов прошу связаться со мной по эл.почте: tsepenko.ilya@gmail.com .

Буду рад услышать вашу обратную связь!

С уважением,

Илья Ц.

Юридическая информация:

«Яндекс Музыка» — права принадлежат ООО «Яндекс Музыка».

«Алиса» ( голосовой помощник, Сервис) — права принадлежат ООО «ЯНДЕКС».

«Яндекс Станция» — права принадлежат ООО «ЯНДЕКС».

«CHROMECAST», «YouTube», «YouTube Music», «Android» — права принадлежат GOOGLE LLC.

«Apple», «iOS», «AirPlay», «AirPods», «AirPods Pro», «Mac mini», «iPhone» — права принадлежат Apple Inc.

«Bluetooth» — права принадлежат Bluetooth SIG, Inc.

Zigbee™ — является товарным знаком Connectivity Standards Alliance. Connectivity Standards Alliance.

Matter™ — является товарным знаком Connectivity Standards Alliance. Connectivity Standards Alliance.