Найти в Дзене
RE: marketing

Тактика №89. Затемните верхнюю границу интерфейса

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

Белые интерфейсы удобны для выполнения действий (например, покупок).

Но есть проблема. Посмотрите на прямоугольники из примера.

-2

Три синих квадрата рядом с двумя красными.

Благодаря гештальту (принципу подобия) ваш мозг видит две группы квадратов.

Тот же эффект возникает с вкладками в вашем браузере. Посмотрите на свои вкладки прямо сейчас. Какого они цвета? Обычно они белые или серые.

Но если на вашем веб-сайте белый фон, то посетители будут группировать ваш веб-сайт по этим вкладкам.

И это плохо.

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

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

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

👉 Предостережение: это зависит от браузера. Для темных вкладок требуется противоположный цвет (например, белая рамка вверху).

🤓 Используйте Яндекс Метрику, чтобы выявить основные версии браузеров ваших пользователей и изучить интерфейс этих браузеров, не забывая про мобильные устройства.

Что такое юзабилити? Это эргономика интерфейса на всем пути следования посетителя — от первого открытия до оформления заявки и получения пользовательского опыта. Мы знаем о UX/UI многое, делимся кейсами и предлагаем свою экспертизу для вашего сайта или приложения.
Что такое юзабилити? Это эргономика интерфейса на всем пути следования посетителя — от первого открытия до оформления заявки и получения пользовательского опыта. Мы знаем о UX/UI многое, делимся кейсами и предлагаем свою экспертизу для вашего сайта или приложения.

Подписывайтесь на новый канал

Запустили канал в Телеграме RE: юзабилити, где ежедневно делимся тактиками повышения конверсии сайта. Уже опубликовали >80 полезных техник, а впереди — заготовки на >100 постов.

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