Алена Нагаевщук, Blog Author

29 июня 2020

Темная сторона дизайна. Шаблоны, о которых лучше забыть

Подобно итальянским мафиози заказчик, маркетолог и дизайнер в полумраке сидят за круглым столом. Над ними висит лампа с огромным торшером. Они думают, как повысить посещаемость сайта. «Подпишись», «Купи сейчас», «Скидка только сегодня», и все это на красном фоне в жирной рамке. Осторожно, это «темные» паттерны.

img

Вжух, и ненужная подписка оформлена

В разработке и дизайне паттерны — это шаблоны, по которым создают и улучшают продукт. Это также наш опыт, привычки, модель поведения. В погоне за лайками и прибылью, иногда бизнес не брезгует рекламными уловками и с помощью «темных» паттернов воздействует на нас.

Когда мы видим знакомые элементы дизайна в новом приложении, мозг автоматически вспоминает пройденные шаги. Куда мы обычно кликаем — этот маршрут заложен на подсознании. Если на пути появляются мигающие плашки, фокус смещается. «Темные» паттерны запутывают, подталкивают к тому, чего мы на самом деле не хотим. Я не собираюсь покупать кроссовки, но уже листаю каталог магазина. Как это произошло? «Спасибо» кликабельному баннеру в статье о спорте.

undefined

Садишься смотреть фильм. Ничего не предвещает беды, как тут — реклама казино. Рука тянется пропустить надоедливое сообщение, но кнопка едва заметна. Находишь, нажимаешь и попадаешь на сайт рекламодателя. Вот тебя и поймали.

О трюке из мобильных приложений рассказывает Иван Емельянов, преподаватель курса UI/UX Design в Beetroot Academy Zaporizhia:

undefined

Иван Емельянов

«Существуют удобство и эргономика. Для нас это прозрачный, удобный сервис и служба поддержки. Это “белые” методы. А кто-то играет в темную, основываясь на невнимательности пользователя. Например, если ты загружаешь отдельную книгу контактов, логично, что ей нужен доступ к контактам смартфона. Но если устанавливаешь плеер, зачем же ему контакты?».

Как обойти «темный» UX? Советы дизайнеров

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

undefined

Андрей Гладкий

«Написать рекламный слоган красным на желтом фоне очень дешевый трюк, но до сих пор не менее эффективный. Его используют секонд-хенды, — рассказывает UI/UX Designer Андрей Гладкий. — Теория колористики говорит нам, что удачные цвета — те, которые сочетаются в природе. Нам приятно наблюдать за закатом. Если внимательно посмотришь на небо, заметишь градиент от темно-синего до голубого или более яркого оттенка. Бывает градиент от темно-синего до ярко оранжевого».

undefined

Цветовой круг, которым пользуются дизайнеры и художники

Ты не ошибешься, выбрав соседние в палитре оттенки. А что делать с текстом?

Компания по исследованию компьютерных интерфейсов Nielsen Norman Group 13 лет изучала, как люди читают контент. Аналитики увидели закономерность: независимо от специфики сайта, наш взгляд движется подобно букве F. Сначала читаем верхнюю часть страницы по горизонтали, затем по левому краю внизу экрана. Наткнувшись на выделенную цитату, читаем ее по горизонтали. Остальной текст сканируем вниз по вертикали. Этот прием используют на новостных сайтах. Важные заголовки размещают вверху слева.

Еще есть Z-паттерн чтения. Несколько секунд рассматриваем верхнюю строчку по горизонтали, двигаемся из левого верхнего угла в правый. Здесь подходящее место для панели навигации сайта. Далее из правого верхнего угла взгляд перемещается в левый нижний, рисуя диагональ. Потом по горизонтали из левого нижнего угла в правый.

undefined

Виктория Вергелес

«Считывание информации по F- и Z-схеме позволяет правильно разместить ключевую информацию. Пользователю это облегчает и ускоряет работу с сайтом, — объясняет Виктория Вергелес, выпускница курса UI/UX в Beetroot Academy. — Крупные блоки быстрее привлекают внимание. Выделение другим цветом или пустым пространством вокруг тоже подчеркивает весомость элемента».

Для некоторых специалистов эти паттерны условны. Говорят, многое зависит от запросов клиента. Среди них бывают любители асимметрии и несовместимых на первый взгляд цветов.

«Есть разные схемы комбинирования элементов. Я пользуюсь принципом “1-2-2-3”, где цифра — приоритет. Сначала размещаем большую картинку или текст с акцентом. Затем поставим два среднего размера заголовка или слогана и снизу — логотип партнеров. Не стоит думать, чем ниже приоритет, тем менее важен элемент. Приоритет №3 часто визуально поддерживает всю композицию», — объясняет дизайнер Андрей Гладкий.

undefined

Андрей Гладкий поделился своим дизайном по принципу «1-2-2-3»

Стив Джобс говорил: «Дизайн – это не то, как предмет выглядит, а как он работает». Понятный и удобный интерфейс удержит внимание пользователя и увеличит лояльность к продукту. Как бы ни манили печеньками (и другими «плюшками»), не переходи на темную сторону дизайна. Береги репутацию. Людей привлекает честность. Помни об этом, создавая очередной лендинг.