Правило банана в UX/UI дизайне
Правило «банана» — это простой, но мощный принцип UX/UI дизайна, который помогает обеспечить лёгкость восприятия и использования цифрового продукта.
Правило «банана» – это простой, но мощный принцип UX/UI дизайна, который помогает обеспечить лёгкость восприятия и использования цифрового продукта. Идея концепции заключается в том, что пользователи должны моментально понимать цель сайта или приложения, подобно тому, как форма банана ясно указывает, что это съедобный продукт.
Ведь согласитесь, когда вы смотрите на яркий спелый банан в магазине через дорогу, вы не задумываетесь, что с ним делать. Ощущение того, что нужно снять кожуру (это, кстати, можно сделать несколькими способами) и съесть все, что осталось — абсолютно интуитивное.
Частично правило «банана» связано с концепцией „affordances“ (в прямом переводе — доступные возможности). Она подразумевает использование продуктом визуальных подсказок, которые позволяют пользователям разобраться в сути его работы. Кстати, этот принцип часто проходит красной нитью через все 10 эвристик usability от Якоба Нильсена. Советуем и даже настаиваем ознакомиться с ними!
Правило «банана» часто применяется к дизайну главной страницы сайта или первого экрана приложения. Они часто являются первой точкой контакта пользователя с продуктом. Соответственно, важно, чтобы сайты или приложения сразу транслировали информацию о возможностях и функциональности. Кстати, недавно мы задевали тему первого контакта интерфейса и пользователя в статье про то, как сделать onboarding крутым и сразу влюбить человека в продукт.
Фото Kelly Sikkema, источник Unsplash
Используйте четкую информационную иерархию
Одним из ключевых пунктов правила «банана» можно считать использование чёткой иерархии информации. Это означает, что дизайнеры должны быть внимательны к акцентам и порядку информации, которую они раскрывают. Существует множество способов, чтобы этого достичь:
- Разные размеры и начертания шрифтов;
- Работа с цветом и формами: чем больше значимость элемента — тем ярче акценты;
- Визуальное разграничение различных типов информации. Например, с помощью девайдеров, подложек и других элементов.
Продумывайте понятную навигацию
Ещё один важный аспект правила «банана» — использование чёткой и последовательной навигации. Пользователи должны легко ориентироваться на сайте или в приложении и понимать, где расположены те страницы, категории или блоки, которые им нужны.
В теории достичь этого несложно — достаточно чёткого и последовательного меню с понятным и очевидным разделением на разные ссылки. На практике этот момент сложнее, особенно когда сервис имеет множество разных данных и страниц.
Кроме того, критически важно обратить внимание на размещение кнопок (особенно CTA). Необходимо убедиться, что они выглядят как кнопки, их легко найти и распознать среди других элементов.
Полезной практикой также является использование «breadcrumb» (хлебных крошек), чтобы человек мог всегда понимать и отслеживать своё «местоположение» на сайте. Кроме того, это очень хорошо для SEO.
Приведём пример с Google Store. На сайте чёткое и последовательное меню навигации с понятными ссылками. Это позволяет пользователям быстро находить то, что они ищут. Кроме того, страница продукта является понятной и простой — внутри неё в доступном виде отображена информация о товаре, характеристиках и ценах. Процесс оформления заказа также прост и, в хорошем смысле, прямолинеен. Человек может найти и идентифицировать призывы к действию, а для покупки необходимо минимальное количество информации. Все это улучшает опыт использования продукта!
Скрин с сайта Google Store
Что будет, если не использовать правило «банана»?
Веб-сайты или приложения, дизайнеры которых не следовали правилу «банана», не могут похвастаться столь понятным интерфейсом и высокой конверсией (а для высокой конверсии ещё и нужен крутой адаптив, об этом мы тоже рассказывали). Часто такие продукты обладают перегруженным дизайном, слишком большим количеством элементов и непонятной навигацией. Безусловно, все эти пункты делают их неконкурентными в своей нише.
Пункты, перечисленные в прошлом абзаце, можно объединить в одно словосочетание — «плохой пользовательский опыт». А, как известно, если человек получил негативный опыт от использования продукта, он практически гарантированно не только не оформит заказ, но и никогда больше к нему не вернётся.
Что в итоге?
Правило «банана» — очень важный принцип UX/UI дизайна. Следуя ему, дизайнеры будут создавать продукты, которые интуитивно понятны и удобны. А это прямая заявка на позитивный опыт использования и высокую конверсию. Да-да, не удивляйтесь! Важность позитивного опыта использования продуктов в современном мире не может быть переоценена. В первую очередь, из-за большой конкуренции на рынке. Нужен продукт, который будет «лучше остальных»? Банан вам в помощь!
