UX/UI и правило банана: как помочь пользователю найти самое главное?
В UX/UI дизайне есть масса правил, которые помогают создавать удобные и понятные интерфейсы. И если вы никогда не слышали о правиле банана, не переживайте: сейчас объясню так, что вы уловите всю суть на лету.
Я уверен, первый вопрос, который засел в вашей голове был по типу: «При чем тут бананы, дизайн и UX/UI?» Но между всем этим есть большая связь, которая формирует одно из важных правил создания понятных продуктов. И чтобы объяснить это вам максимально понятно, я изучил достаточно информации и проанализировал популярные сайты, которые разработаны по этому правилу и соответствуют другими эвристиками usability.
Что такое правило банана?
Представьте, вы идете на кухню, чтобы съесть банан. Открываете холодильник и моментально находите его среди других продуктов. Как вы поняли, что это именно он? Вы были так уверены, потому что знаете его цвет, форму и куда вы его положили после похода в супермаркет.
А теперь представим, что кто-то купил экзотический вид бананов и оставил их на кухне. Например, красные и они странной круглой формы. Вы открываете холодильник и ищете, ведь вам говорят что бананы именно там. Но результата ноль. Может вы и смотрите на них, но думаете что это апельсины или вообще что-то неизвестное и его лучше не трогать.
В этом и проявляется суть правила банана в UX/UI дизайне. Оно гласит: если пользователю нужно найти банан, то банан должен быть простым и очевидным. Ну а если они красные и круглые, то понятно что искать мы их будем долго и нудно. Так и сайте: главный элемент интерфейса должен быть сразу заметен и понятен без лишних усилий. Это могут быть кнопки, иконки, формы, списки и многое другое.
На сайте Airbnb иконка поиска жилья заметная и очевидная
И это не только про удобство и понимание, но и про экономию времени. Ведь никто не хочет торчать на сайте больше того, чем предполагает изначально. Меня это, кстати, тоже очень сильно раздражает. Когда переходишь на сайт, а там не то что неудобно, а как-будто я пришел играть в шоу «Интуиция». Кнопки записи нет, где искать цены на услуги не понятно, и куча анимации сверху в придачу. Слышал ли дизайнер этого сайта вообще о существовании хоть каких-то правил в UX/UI? Пожалуй, нет.
Почему важно не только помнить, но и применять?
Окей, с экономией времени разобрались. Но это не единственное, почему стоит не просто понять: что это за правило, но и разобраться как с ним работать.
- Интуитивность
Люди предпочитают интерфейсы, которые легко понять без дополнительной инструкции и лишних tooltips. «Банан» — это элемент, который интуитивно указывает пользователю, куда идти дальше. Например, кнопка «Записаться на курс» или «Начать работу», когда вы впервые открыли приложение. - Снижение когнитивной нагрузки
Пользователи не хотят тратить время на раздумья о том, что же делать дальше. Яркий, заметный элемент убирает лишние сомнения и снижает нагрузку на мозг, улучшая общее впечатление от продукта. - Улучшение пользовательского опыта
Когда пользователь достигает цели без лишних сложностей, он остаётся довольным. А приятный опыт заставляет вернуться к вашему продукту снова и советовать его знакомым. - Универсальность
Не все пользователи обладают одинаковым уровнем знаний и смогут понять все ваши идеи. «Хороший банан» учитывает потребности всех пользователей. И как отмечал ещё Якоб Нильсен в седьмой эвристике, нужно проработать два сценария: для новичков и для опытных пользователей.
В Instagram хорошим бананом является кнопка «+» для создания нового поста или сторис. Разработчики переместили её в центральное меню, чтобы пользователи могли быстро начать создавать контент. Или, сайт Booking, где банан — это поле для ввода даты и места поездки. Всё остальное (спецпредложения, рейтинги) появляется уже после.
На сайте Booking, банан — это поле для ввода даты и места поездки
Как правило банана работает на практике?
В теории всё звучит легко: разместите яркий элемент в интерфейсе, и пользователи тут же поймут, что делать. Но как это реализовать так, чтобы «банан» был не просто заметным, но и понятным для пользователя? Тут я вам советую не просто поработать с цветовыми палитрами и пространством, а углубиться в психологию взаимодействия. И следовать советам ниже 🙂
Определите цель
Важно понять с самого начала работы — что должен сделать пользователь. Например, в интернет-магазине это может быть добавление товара в корзину и его покупка, а на лендинге запись на обучение. От этого зависит какой элемент станет тем самым «бананом», а какие уже будут второстепенные. Или не самые важные.
А можно ли сказать, что в дизайне вообще есть второстепенные детали или те, на которых можно схалтурить? Наш ответ — конечно нет. И на нашем обучении Профессия UI UX дизайнера мы акцентируем внимание, что важно выкладываться на каждом этапе работы: от идеи до презентации своих решений. Делать всё на тяп ляп не получится, ведь наши менторы проверяют каждый пиксель и дают объемный фидбек. Это не про красивую картинку в итоге, а о создании продуманного, удобного и эстетичного продукта. Готов узнать все рабочие лайфхаки и учиться с спикерами из топовых компаний, как Google, Meta, Fiverr и т.д.? Тогда присоединяйся к нашему пижамному комьюнити уже сейчас!
Используйте хороший контраст
Банан должен выделяться на фоне интерфейса, чтобы привлекать внимание. Например, это может быть яркий цвет кнопки, который контрастирует с остальными элементами. Но работайте с ними очень аккуратно, чтобы из понятного и простого интерфейса не сделать разноцветную картинку, где контрастность текстов будет просто на минимуме. Но главное это вовремя заметить и исправить, а наш пижамный ресурс с Проверкой контрастности цветов поможет в этом.
Кнопка в приложении Bolt зелёная и сразу бросается в глаза
Хорошим примером является кнопка в приложении Bolt: она зелёная, бросается в глаза, расположена в самом удобном месте, и ты сразу понимаешь, что это нужно нажать.
Следуйте привычным паттернам
«Всё новое — это хорошо забытое старое» — слышали о таком? Есть много вещей и паттернов, которые так укоренились, что менять их не стоит. Люди привыкли, что кнопка действия размещается внизу экрана смартфона или, что иконка закрыть приложение на ноутбуке расположена в правом углу. Как я говорю: «Зачем выдумывать велосипед, если можно взять его за основу и добавить свой дизайн и детали?»
В WhatsApp кнопка отправки сообщения расположена в нижнем правом углу
Возьмём WhatsApp. В мобильной версии приложения кнопка отправки сообщения расположена в нижнем правом углу — там, где пользователи интуитивно ожидают её увидеть. И где им удобно дотянутся пальцем.
Делайте тексты максимально понятными
Лично я не понимаю зачем делать огромные текстовые блоки, которые никто читать не будет! Процентов 90% уж точно, тем более в важных элементах. Это же не инструкция к новому пылесосу или сборке стола. Хотя и там многие читать это не будут, с первого раза так точно 😀
Описание того, что нужно сделать должно быть понятным и кратким. Например, в Spotify кнопка «Слушать бесплатно» сразу говорит, что будет если мы нажмем на нее. А если бы это были размытые фразы по типу «Попробуй бесплатно сейчас» или «Тестовое время на период 30 дней», не очень понятно, что будет бесплатно и вообще о чем это.
Тексты и кнопки в приложении Spotify максимально понятны
Удобные элементы управления
Интерактивные элементы, такие как кнопки, иконки, переключатели и ползунки, должны быть не только видны, но и интуитивно понятны. Очень важно следить за их размером, цветовым контрастом и расположением, чтобы каждый мог легко с ними работать.
Ползунок прогресса видео на YouTube — пример удобного элемента управления
Хорошим примером будет работа ползунок прогресса видео на YouTube. Он достаточно широк, имеет различные цветовые изменения при наведении и при взаимодействии. А с помощью меток времени, отображаемых на ползунке, пользователи могут легко ориентироваться, в какой части видео они находятся.
Правило банана — это не веселая метафора
Правило банана — это способ упростить интерфейс, оставив только самое важное. Оно помогает выделить ключевые элементы, упростить навигацию и сделать взаимодействие с продуктом удобным. Попробуйте только внедрить это правило в своем дизайне, и вы заметите, как ваш интерфейс становится более понятным.
В мире, где конкуренция между цифровыми продуктами колоссальна, интерфейсы, которые умеют «быть бананом», всегда выигрывают. Ведь, как показывает практика, чем меньше барьеров, тем больше удовлетворённых пользователей.
