Rivalry2

HTML Diff

1 added 1 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#подборки</a>

2 <ul><li>15 июн 2023</li>

3 <li>0</li>

4 </ul><h2>На десктопе или в телефоне: бесячие различия в фичах популярных сервисов</h2>

5 Одинаковые иконки для разных функций в "Яндекс Музыке", костыльные корзины Ozon, запись звонка в Zoom, неудобный поиск Lamoda.

6 Иллюстрация: Аня Макарова для Skillbox Media

7 Пишет про тексты в интерфейсе, проектирование и дизайн. Развивает направление UX-редактуры в Skyeng. Ведет телеграм-канал про редактуру "Письма от Яны Дворецкой"

8 Дизайн-команды крупных брендов порой поступают странно. Убирают критически важные функции из мобильной версии и пичкают ненужность в десктопную, и наоборот.

9 Окей, иногда в этом есть здравый смысл. Например, пользователям Zoom неудобно рисовать на доске с телефона, так зачем захламлять мобильную версию лишней фичей? Но часто это просто ошибки. Посмотрим на десктопные и мобильные версии популярных сервисов и выясним, что там бесит сильнее всего.

10 Разные иконки в мобильном приложении и на десктопе. Иконки в интерфейсе ускоряют восприятие информации: если понравилась песня, кликаешь на сердечко - ясно, что это избранное.

11 В "Яндекс Музыке" всё же решили покреативить: сердечко используется в мобильном приложении ещё для двух функций - "Отложить на полку" и "Подписаться на подкаст". Приходится вчитываться, а не верить иконкам на слово.

12 В мобильном приложении. Кстати, опции "Добавить в очередь" на десктопе я так и не нашлаСкриншот: "Яндекс Музыка" / Skillbox MediaТоже в мобильном приложенииСкриншот: "Яндекс Музыка" / Skillbox MediaНа десктопеСкриншот: "Яндекс Музыка" / Skillbox MediaТакие расхождения в версиях чаще всего случаются, когда над дизайном работают разные команды с разным видением пользовательского опыта.

13 Как улучшить.Унифицировать иконки для десктопной и мобильной версии, чтобы обеспечить бесшовный пользовательский опыт, и сделать разные иконки для разных опций, чтобы взаимодействие стало интуитивно понятным и более быстрым.

14 Нельзя записать кружок с десктопа.В мобильной версии это экономит время, и разбавляет однообразный текстовый контент, если вы ведёте свой канал. При этом в десктопе на Windows и в веб-версии кружочки почему-то недоступны.

15 Так можно сделать только в мобильном приложенииСкриншот: Skillbox MediaКак улучшить.В Telegram посчитали опцию ненужной для пользователей с десктопа - почему же? На компьютере ведь тоже есть камера!

16 Одно слово приходит на ум после посещения маркетплейса - шум.

17 Лейблы красные, зелёные, синие, оранжевые - в общем, вырви глазСкриншот: Ozon / Skillbox MediaВ десктопеСкриншот: Ozon / Skillbox MediaНа сайте смотрится спокойнее: крупные изображения товаров разбавляют кричащие лейблы, но полностью это проблему не решает. Здесь могли бы помочь общие требования к изображениям товаров. Например, "Яндекс Маркет" показывает ту же информацию, но делает это гораздо спокойнее:

18 Как у "Яндекс Маркета" - везде белый фонСкриншот: Ozon / Skillbox MediaРазные иконки для корзины.В карточках некоторых товаров две кнопки корзины (какую выбрать, чтобы уничтожить человечество?): одна предлагает доставку за 30 минут, другая - сегодня. Отвлечёмся от того, что это кажется костыльным решением, посмотрим на иконки - в мобильном приложении и на сайте разные иконки корзины.

19 На десктопеСкриншот: Ozon / Skillbox MediaВ мобильном приложенииСкриншот: Ozon / Skillbox MediaПоиск в мобильной версии перегружен.В телефоне он пристыковывается к верхней панели - а там и так много индикаторов и адрес доставки. Получается как-то совсем тесно и шумно для элемента, который используют очень часто.

20 В мобильном приложенииСкриншот: Ozon / Skillbox MediaПри этом если заблюрить страницу в десктопной версии, то видим, что сильнее притягивает внимание именно поисковая строка:

21 В десктопеСкриншот: Ozon / Skillbox MediaКак улучшить:

22 <ul><li>Для начала всё-таки избавиться от двух кнопок, одна из которых ещё и красная. Хотели убрать один шаг в процессе покупки, но запутали ещё больше. Лучше оставить одну кнопку - "В корзину" - и уже там предложить варианты доставки.</li>

23 <li>Унифицировать иконки. Пользователи проводят в интернет-магазинах много времени, иконки снижают когнитивную нагрузку, позволяют не читать навигационные элементы.</li>

24 <li>Облегчить поисковую строку в мобильной версии можно, если переместить иконку с самолётом (продажу билетов) и иконку с чатами, а также опустить ниже поисковую строку - ближе к середине, например как в "Еаптеке". Или поставить её внизу экрана, чтобы было проще дотянуться пальцем.</li>

25 </ul>В мобильном приложении "Еаптеки" поиск выглядит облегчённым, хотя, как и в Ozon, место занимают голосовой поиск и сканирование штрихкодаСкриншот: "Еаптека" / Skillbox MediaБудучи книжным червём, я знаю наверняка, что поиск книг в мобильном приложении и на десктопе "ЛитРеса" - две параллельные вселенные. Бывает, не могу найти в мобильном приложении книги, которые после проверки оказываются на сайте. Возможно, это просто мистика.

26 Смотрим дальше. В приложении странная комбинация доступных валют. Где же рубль? К слову, на десктопе такого не наблюдалось.

27 В мобильном приложенииСкриншот: "ЛитРес" / Skillbox MediaНет озвучки текста.Я могу залениться читать и переключиться в мобильном приложении на аудиоверсию. Но на десктопе, извините, читайте сами. Такой опции не предусмотрено.

28 В мобильном приложенииСкриншот: "ЛитРес" / Skillbox MediaНа десктопе. Книга та же, но иконки с возможностью послушать книгу нетСкриншот: "ЛитРес" / Skillbox MediaКак улучшить.Добавить иконку озвучки в десктопную версию, в том числе для инклюзивности. А также унифицировать иконки для закладок - сейчас они разные в мобильной и десктопной версиях.

29 Если кто не знает, это образовательная платформа, на которой любой желающий может создать онлайн-курс.

30 Да, учиться теперь не за столом, ёрзая на неудобном стуле, а прямо лёжа на диване с телефоном в руках. Красота! Но не торопитесь расслабляться. В Stepik придётся сесть за парту, как приличному ученику, ведь видеоплеер в мобильном приложении не подстраивается под размер экрана.

31 На десктопеСкриншот: Stepik / Skillbox MediaВ мобильном приложенииСкриншот: Stepik / Skillbox MediaКак улучшить.Настроить эмбед для плеера так, чтобы видео встало в экран и не приходилось скроллить. Это важно, так как основной сценарий для обучающих приложений на мобильном - это как раз просмотр лекций.

32 Нет записи встречи в мобильном.Мы дожили до того, что проводим встречи прямо в смартфоне. Почему же мобильную версию лишили функции записи?

33 - На десктопеСкриншот: Zoom / Skillbox MediaВ мобильном приложенииСкриншот: Zoom / Skillbox MediaНастройки чата в мобильном запрятаны.Приведу пример. Знак пешеходного перехода всегда стоит возле пешеходного перехода. Это правило, так д��лжно быть. Если знак стоит на другой улице - это знак для другого перехода. Объекты, расположенные достаточно близко друг к другу, воспринимаются как единая группа. Это упрощает восприятие информации.

33 + На десктопеСкриншот: Zoom / Skillbox MediaВ мобильном приложенииСкриншот: Zoom / Skillbox MediaНастройки чата в мобильном запрятаны.Приведу пример. Знак пешеходного перехода всегда стоит возле пешеходного перехода. Это правило, так должно быть. Если знак стоит на другой улице - это знак для другого перехода. Объекты, расположенные достаточно близко друг к другу, воспринимаются как единая группа. Это упрощает восприятие информации.

34 Тогда почему настройки чата в мобильном приложении Zoom убежали от чата? Найти их можно аж в третьем уровне в навигации. Представьте, как неприятно сновать по вкладкам в мобильном приложении, если вы на встрече.

35 В мобильном приложенииСкриншот: Zoom / Skillbox MediaПри этом в десктопной версии всё ок - вот чат, вот и настройки.

36 На десктопеСкриншот: Zoom / Skillbox MediaКак улучшить.Разместить настройки рядом с функцией или внутри самой функции. Это и экономит время и когнитивные ресурсы пользователей, и не отвлекает внимание от встречи.

37 Опция-сюрприз в мобильном приложении.В мобильном приложении можно узнать, сколько человек уже откликнулись на вакансию. При этом с десктопа посмотреть количество откликов нельзя.

38 В мобильном приложенииСкриншот: HeadHunter / Skillbox MediaНа десктопеСкриншот: HeadHunter / Skillbox MediaКак улучшить.Добавить секретную опцию в десктопную версию, а то нечестно как-то.

39 Поиск по фотографии - только в мобильной версии.Минималистичный дизайн интернет-магазина Lamoda покорил. Минимум шума, тонкая обводка иконок, отсутствие кричащих оттенков - можно целый день выбрать себе одежду, и глаза не устанут. А ещё Lamoda порадовала поиском одежды по фотографии. Правда, эта опция почему-то оказалась доступной только в мобильном приложении.

40 В мобильном приложенииСкриншот: Lamoda / Skillbox MediaВ десктопной версии пользователь может воспользоваться лишь стандартным поиском, а жаль.

41 На десктопеСкриншот: Lamoda / Skillbox MediaКак улучшить.Добавить поиск по фотографии в десктопную версию. Возможно, в Lamoda выяснили, что это не приоритетный сценарий, но опция настолько удобная, что я не знаю, кому бы она не пригодилась.

42 Крупные сервисы всегда проверяют решения на пользователях - и не один раз, а итеративно. Поэтому мои находки - едва ли просто ляпы (вероятно, у них найдётся объяснение для каждого). Хотя всё может быть.

43 Другие материалы о дизайне интерфейсов

44 <a>Попробуйте бесплатно 4 топовые профессии в дизайнеПройдите бесплатный курс по дизайну. Добавьте 4 крутых кейса в портфолио и решите, в каком направлении развиваться дальше. Пройти курс→</a>