(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date(); for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }} k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(49180180, "init", { defer: true, clickmap:true, trackLinks:true, accurateTrackBounce:true }); ym(49180180, 'hit', window.location.href);

7 законов удачного UI/UX на примере Яндекс.Такси и Яндекс.Музыки

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

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

1. Закон Якоба

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

Пользователи хотят, чтобы ваш сервис работал по тем же принципам. Не нужно разрабатывать что-то кардинально новое. Иначе прежде, чем начать пользоваться приложением, человеку придется сначала разобраться в нем. Мозг — штука ленивая, он будет стараться избежать трудностей.

Поэтому основной дизайн лучше сделать похожим. А изменить можно типографику, визуальную иерархию, карточки, кнопки, цвета и так далее.

Интерфейс Яндекс.Музыки похож на тот, что десятилетиями использовался в музыкальных проигрывателях. Например, на всем известный Windows Media (кнопка воспроизведение/пауза, возможность перейти к следующему треку)

Как только вы зайдете в приложение, вы ощутите контроль над системой.

2. Закон общей области

Гласит, что если элементы объединены с помощью четко очерченной границы, они воспринимаются как часть группы.

Яндекс.Такси объединяет соответствующие элементы в светло-серую рамку, чтобы пользователь знал, что они функционируют вместе

3. Закон подобия

Человеческий глаз склонен воспринимать похожие элементы дизайна как целостную картину, форму или группу, даже если они разделены.

Яндекс.Музыка знает это правило. Сервис использует разные формы для идентификации исполнителей, песен и плейлистов

Это помогает пользователю лучше ориентироваться в интерфейсе. Когда человек видит круглый элемент, он сразу понимает, что это профиль исполнителя.

4. Закон Хика

Время принятия решения зависит от количества и сложности вариантов.

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

Яндекс.Такси предлагает 3 варианта стоимости поездки и один дополнительный 

Цена зависит от класса автомобиля, что способствует быстрому принятию решения. Это означает, что меньшее количество вариантов поможет сэкономить время для выбора мест для встречи.

5. Эстетичный эффект юзабилити

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

Пользовательский интерфейс Яндекс.Музыки чист, минималистичен и интуитивно понятен. Фон перенимает настроение обложки, это выглядит максимально привлекательно

Это значит, что сервис придерживается закону эстетичного юзабилити.

6. Порог Доэрти

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

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

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

Если предоставление обратной связи замедленное, это вводит посетителя в замешательство и вынуждает его выйти из приложения. Он перезапускает его, поскольку думает, что, возможно, его телефон тормозит. Но на самом деле все дело в приложении, которое не предоставляет оперативный ответ.

7. Закон Фиттса

Время, потраченное на достижение цели, зависит от расстояния до нее и ее размера.

Увеличение размера элемента и облегчение доступа к нему может сократить время осуществления целевого действия, например, нажатия кнопок, выбора элементов.

Сделайте объекты такими, чтобы пользователь без труда дотянулся до них одной рукой. Тогда ему будет удобно нажимать нужные кнопки.

Яндекс.Музыка следует закону Фиттса, упрощая доступ к цели. Многие их кнопки можно нажать, удерживая телефон одной рукой

С вами была студия Pyrobyte, которая использует принципы правильного построения UI/UX в своих проектах ;) Подписывайтесь на наш блог, вас ждет много интересного!

Если у вас есть задача разработать сайт или мобильное приложение, то напишите в Телеграм, мы это обсудим: https://t.me/sashadzen

Заказать разработку сайта, веб-сервиса или мобильного приложения на нашем сайте: https://vk.cc/cuglQZ

Партнерская программа, где мы платим от 10 000 до 200 000 рублей за контакты тех, кому нужен дизайн или разработка: https://vk.cc/cuglXT

Телеграм-канал Саши Комбарова про управление агентством, проектами, людьми: https://t.me/sasha_kombarov

Телеграм-бот, который бесплатно выдает чек-листы, памятки и регламенты по управлению, маркетингу, аналитике, дизайну и разработке: https://t.me/regulations_pyro_bot

0
145 комментариев
Написать комментарий...
Никита Липатов

Интерфейс Яндекс Музыки конечно хорош, но что вы скажете об этом)

Ответить
Развернуть ветку
Иван

Технологии рассы предтеч!

Ответить
Развернуть ветку
Пиробайт
Автор

Вспомнили, прослезились...

Ответить
Развернуть ветку
6 комментариев
Анастасия С

Все, возвращаемся в 2007

Ответить
Развернуть ветку
Igor Tarasov

олдскулы свело

Ответить
Развернуть ветку
Luiji Petrov

Пустил скупую олдскульную слезу

Ответить
Развернуть ветку
Alex Melnikoff

а еще из этой штуки не пропадают песенки, как из ямузыки

Ответить
Развернуть ветку
1 комментарий
Александр

Лучше пока никто не сделал

Ответить
Развернуть ветку
Космический Волк

А как же он? 💫

Ответить
Развернуть ветку
Павел Туганов

я скажу что мне ностальгия в глаз попала

Ответить
Развернуть ветку
Koiru Zero

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

Ответить
Развернуть ветку
Пиробайт
Автор

Так суть хорошего UI/UX интерфейса как раз и состоит в том, чтобы все было интуитивно понятно)

Ответить
Развернуть ветку
14 комментариев
Eternal Hate

Пиздец вы там законов понапридумывали. Я просто хочу заказать такси, зачем мне еда, продукты и реклама икеи?

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
2 комментария
Пиробайт
Автор

Но у вас же никто не отбирает возможность заказать такси. А кому-то может понадобиться и такой функционал.

Ответить
Развернуть ветку
8 комментариев
Драка вегетарианца с людоедом

Это называется "закон приложения, в которое ежедневно заходят миллионы пользователей с намерением потратить деньги".
Убер на своём родном рынке сейчас точно таким же становится, даром что не пытается продать тебе дьюнгельског с первой страницы.

Ответить
Развернуть ветку
2 комментария
Дмитрий Прозоров

Если не передергивать: то заказ такси и доступен сразу, через поле ввода и подходящие под текущий случай адреса

Чтобы открылось то, что вы показали — надо свайпнуть

Ответить
Развернуть ветку
Анастасия С

А лично мне музыка Яндекса кажется не очень удобной. Да и бесплатной демки никакой нет, что тоже не очень приятно.

Ответить
Развернуть ветку
Пиробайт
Автор

А где музыку слушаете, если не секрет?)

Ответить
Развернуть ветку
10 комментариев
Иван

2 месяца можно бесплатно пользоваться, потом первая плата снимается.

Ответить
Развернуть ветку
Pavel Raspaev

Это всё классно, но я жду тот день, когда до продактов популярных проигрывателей музыки (спотифай, я.музыка, и тд) дойдёт, что самый удобный вариант отображения аудио дорожки это спектральный, как у SoundCloud.

Но боюсь это произойдёт ещё не скоро.

Ответить
Развернуть ветку
Andrew Oz

Спектральная дорожка занимает много полезной площади по вертикали, поэтому внедряться в этом интерфейсе вряд ли будет

Ответить
Развернуть ветку
1 комментарий
Иван

Лучше эквалайзер как в старых проигрывателях) и чтобы как раньше можно было настраивать

Ответить
Развернуть ветку
2 комментария
Пиробайт
Автор

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

Ответить
Развернуть ветку
Антон Кузьмин

Саундклауд заточен скажем так под музыкальных задротов. И блондинкам все эти выкрутасы нафиг не нужны. Правда насколько помню прогрессбар там все же не спектральный а в виде waveform.

Ответить
Развернуть ветку
Winmord

Интересно, какой закон применим в этом случае

Ответить
Развернуть ветку
Пиробайт
Автор

Закон расфокуса, видимо :)

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Gre Li

192 кбит/с вообще-то за глаза. Чтобы услышать разницу надо специально вслушиваться с профессиональным оборудованием звукооператоров. И то не факт, что услышишь.

Ответить
Развернуть ветку
Пиробайт
Автор

Держите

Ответить
Развернуть ветку
4 комментария
M

Бесит когда ЯМ при отсутствии связи не играет кэшированную музыку пока не включишь специальный ебучий «офалйн-режим»

Ответить
Развернуть ветку
Лицочес

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

Ответить
Развернуть ветку
Пиробайт
Автор

Странно. У нас воспроизводятся скачанные треки без этого режима.

Ответить
Развернуть ветку
jonewayne

Кешированная = скачанная? Если да, то у меня на андроиде всё так работает, не в курсе про оффлайн режим вообще

Ответить
Развернуть ветку
Иванов Иван Иванович

Квест по отписке от Яндекс Плюса — вот это "удержание" мое почтение

Ответить
Развернуть ветку
Иван

Не знаю, меня устраивает пока что.

Ответить
Развернуть ветку
1 комментарий
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Пиробайт
Автор

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

Ответить
Развернуть ветку
5 комментариев
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Иван
Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Пиробайт
Автор

Не совсем.

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Елизавета

Полезная статья! Спасибо 🫶🏻

Ответить
Развернуть ветку
Пиробайт
Автор

Всегда пожалуйста :) Рады, что вам понравилось

Ответить
Развернуть ветку
KeeF3ar

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

Ответить
Развернуть ветку
Иван

Судя по всему, на айфоне все что не от айфона выглядит не нативно)

Ответить
Развернуть ветку
Иван

Охх, люблю комменты про нейросети

Ответить
Развернуть ветку
Александр

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

Ответить
Развернуть ветку
Пиробайт
Автор

Нам удобно, у нас не лопаты :) И длинные пальцы. Хотелось бы сравнить со Спотифаем, конечно. Но с другой стороны - зачем, если и в ЯМузыке все устраивает?)

Ответить
Развернуть ветку
meowna Lisa

О, так вот почему мне так нравится приложение с музыкой у Яндекса (если не брать в счет их алгоритм рекомендаций)

Ответить
Развернуть ветку
Пиробайт
Автор

Да, алгоритм рекомендаций у них тоже неплохой)

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Пиробайт
Автор

Не подкрепите аргументами?)

Ответить
Развернуть ветку
12 комментариев
PMP TECH

Классная статья 🔥🔥🔥

Ответить
Развернуть ветку
Пиробайт
Автор

Спасибо! :)

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Пиробайт
Автор

А почему их должны уволить?) Любые нейросети это хороший инструмент, но без доработок со стороны человека использовать их на постоянной основе будет проблематично

Ответить
Развернуть ветку
9 комментариев
Иван

Вы слишком переоцениваете нейросети. Тем более, чат гпт не про дизайн, про дизайн - миджорни, но и она еще нет нет, да нарисует шестипалых.

Ответить
Развернуть ветку
6 комментариев
Artem Sovetnikov

Лютая фигня музыка на мобиле, фиг найдешь там нужную функцию
Задачи пользователей не совпадают с задачами бизнеса, а приложения Яндекса всегда для целей бизнеса

Ответить
Развернуть ветку
Пиробайт
Автор

Забавно. А некоторые пишут, что интерфейсы Яндекса слишком просты и интуитивно понятны, записывая это в минусы :)

Ответить
Развернуть ветку
1 комментарий
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
142 комментария
Раскрывать всегда