(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 комментариев
Написать комментарий...
Koiru Zero

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

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

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

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

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

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

Я тот подписант. Меня более, чем устраивает нажать одну кнопку и что-то слушать. А уж когда это что-то попадает в мои интересы - вообще огонь.

Сейчас битва многих контент-сервисов разворачивается именно в алгоритмах рекомендаций.

ЗАЧЕМ мне тыкать, искать, выбирать, если рекомендации отрабатывают ХОРОШО?

Ну и да, есть очень небольшой процент людей, которым нужно именно кнопки потыкать, а не музыку включить :) Но из мало, поэтому одна кнопка у Яндекса.

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

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

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

Спасибо за развернутый комментарий. Абсолютно с вами согласны.

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

Как вернуться к прошлому треку в "Моей волне"?

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

Нажать на стрелочку назад ;)

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

Забыл указать - в настольной версии.

Там нет кнопки назад. Но есть кнопка "История воспроизведения".

В принципе, нормальное решение, но лично мне кнопки "Назад" не хватает.

Можно, конечно сказать, что кнопку крайне редко используют. Но тогда почему она присутствует в мобильной версии? :)

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

Да, в десктопной версии нам бы тоже хотелось видеть эту кнопку

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

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

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

А зачем обновлять старую версию?

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

у меня вопрос, почему вообще существуют два приложения :)

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

Нам тоже интересно. Если вдруг узнаете ответ от техподдержки Яндекса, поделитесь с нами :)

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

Нажать "назад" но только в моб. версии.

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