Когнитивные искажения в веб-дизайне

И так... Помню интересный случай. Клиент, владелец успешного готового интернет-магазина автозапчастей, пришёл с, казалось бы, простой задачей — редизайн сайта. А дело в том, что у клиента появился новый маркетолог, молодой такой парень, насмотрелся модных сайтов и давай причитать: "Нам нужен минимализм! Больше воздуха! Меньше кнопок!"

Ну что, давайте начнем! Сделали прототип, красивый, современный. На презентации маркетолог сияет, владелец бизнеса доволен. Запустили... И тут началось! Звонки от клиентов: "А где кнопка подбора по автомобилю?", "Почему исчез быстрый заказ?", "Не могу найти, как раньше..."

⚠️ По статистике Nielsen Norman Group, около 70% редизайнов крупных сайтов приводят к временному падению конверсии. И дело тут не в качестве дизайна.

Если здраво смотреть на вещи, наш мозг — удивительный инструмент. Он создаёт шаблоны, привычки, находит кратчайшие пути. Как говорила моя бабушка: "Привычка — вторая натура". И знаете, в веб-дизайне это работает на все 100%.

А теперь внимание! Когда вы в следующий раз захотите "освежить" дизайн сайта, вспомните: ваши пользователи уже создали свои нейронные связи. Они знают, где что находится, как работает, куда нажимать. Это как перестановка в квартире — вроде и красивее стало, а первое время постоянно спотыкаешься о новое расположение мебели.

Если рассуждать логически, любое изменение интерфейса — это как минимум временный дискомфорт для пользователя. Помню, как один клиент сказал: "Слушай, а давай просто оставим старый дизайн основных кнопок, а обновим всё остальное?" И знаете что? Это сработало!

Интересный факт: даже соцсеть (запрещенный в РФ), при всех своих ресурсах и возможностях, внедряет серьезные изменения интерфейса постепенно, группами пользователей, иногда растягивая процесс на месяцы.

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

Или как говорится, если не можешь победить — возглавь. Двигаемся дальше...

Селективное внимание на сайте

Как-то раз сидели мы с клиентом, владельцем крупного интернет-магазина строительных материалов, и смотрели на его сайт. А дело в том, что конверсия падала, несмотря на растущий трафик. "Слушай", – говорит он мне, – "давай сделаем кнопку заказа побольше и поярче. Пусть красная будет, её же нельзя будет не заметить!"

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

На деле наш мозг – удивительный фильтр. Помните эксперимент с горилллой? Когда люди, увлечённые подсчётом передач мяча, не замечают человека в костюме гориллы? В веб-дизайне происходит то же самое.

На деле происходит вот что: каждый раз, открывая новую страницу, наш мозг включает особый режим – что-то вроде автопилота. Мы не читаем, мы сканируем. Не изучаем, а выхватываем знакомые паттерны.

А теперь внимание! Вот три главных принципа работы селективного внимания на сайте:

1. F-паттерн просмотра Помню случай с одним информационным порталом. Владелец жаловался, что важные новости в правой колонке никто не читает. Ну конечно! Наши глаза движутся по странице буквой F – две горизонтальные полосы сверху и одна вертикальная слева. Всё, что не попадает в этот паттерн, считай, невидимо.

2. Баннерная слепота "А давайте баннер на полэкрана сделаем!" – часто слышу от клиентов. И тут я обычно рассказываю историю про мой первый сайт образца 2005 года. Там были эти самые мигающие баннеры, и знаете что? Уже тогда люди научились их игнорировать. Сейчас это умение достигло уровня суперспособности.

3. Эффект привычки Как говорила моя бабушка: "Привычка – вторая натура". В интернете это работает на 146%. Если каждый сайт, который вы посещаете, имеет меню сверху и логотип слева – угадайте, где вы будете искать эти элементы в следующий раз?

⚠️ Важно: когда пользователь приходит на ваш сайт, у него уже есть ментальная карта того, как всё должно работать. И любое отклонение от этой карты – это дополнительная когнитивная нагрузка.

По сути, селективное внимание – это не баг, а фича нашего мозга. Это способ не сойти с ума в мире информационной перегрузки. Или как сказал бы Дэниел Канеман (а я его книгу "Думай медленно, решай быстро" перечитывал раза три): мы используем "Систему 1" – быструю, автоматическую, работающую на шаблонах.

А теперь давайте разберём, как это использовать на практике...

Эффект привычки и сопротивление изменениям

На днях смотрел аналитику одного крутого проекта. Серьёзный холдинг, миллионные обороты, современный дизайн. Классическая история – в январе запустили обновлённый сайт. Потратили кучу денег на исследования, UX-дизайнеров, аналитиков. Сделали всё "по науке".

А в феврале продажи упали на 40%.

Решил копнуть поглубже. Полез в записи звонков в службу поддержки. На деле оказалось, что постоянные клиенты физически не могли найти привычные функции. "Раньше я просто нажимал на синюю кнопку справа!", "Почему всё так сложно стало?", "Верните как было!"

И вот тут самое интересное. Новый дизайн реально был лучше. Современнее, удобнее, быстрее. По всем канонам юзабилити. Только вот незадача – он категорически не совпадал с тем, к чему привыкли пользователи.

Прикол в том, что наш мозг – жуткий лентяй. Он всеми силами пытается экономить энергию. И когда находит рабочий способ что-то делать – намертво вцепляется в него.

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

Прихожу к клиенту и показываю графики. "Смотри", говорю, "вот карта кликов со старого сайта. А вот с нового. Видишь разницу? Люди пытаются кликнуть там, где кнопка была раньше. Раз за разом. И бесятся, когда не получается".

⚠️ Оказывается, привычка сильнее логики. Когда человек сталкивается с изменением в интерфейсе, его мозг воспринимает это как угрозу. Буквально – как опасность.

"Хорошо", спрашивает клиент, "что делать? Не менять же никогда ничего?". На деле, решение оказалось довольно простым. Мы разработали план плавного перехода:

1. Сначала оставили все ключевые элементы на старых местах, но обновили их внешний вид
2. Через месяц начали потихоньку добавлять новые фичи, не трогая старые
3. Ещё через месяц стали постепенно переносить элементы на новые места, оставляя временные подсказки

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

Кстати, забавный случай был во время этого перехода. Один из пользователей написал в поддержку: "Ребят, а вы что-то меняли на сайте? Вроде стало удобнее, но я даже не понял, что именно изменилось".

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

Когнитивные барьеры в дизайне

Люблю такую историю рассказывать начинающим дизайнерам. Сидим как-то с заказчиком, обсуждаем редизайн сайта турфирмы. Он мне показывает сайты конкурентов – сплошь модные лендинги, огромные фотки на весь экран, минимум текста.

"Хочу так же!" – говорит. "А давай посмотрим, как твои клиенты реально выбирают туры?" – предлагаю я.

Записали несколько юзер-тестов. Смотрим. На деле картина получилась интересная. Пользователи открывают сразу несколько сайтов турфирм. Сравнивают цены, читают программы туров, смотрят отзывы. Им важно видеть много информации сразу, чтобы сравнивать.

"Ну вот смотри", – говорю заказчику, – "твои клиенты не просто красивые картинки хотят. Они решения принимают. А когда человек принимает решение – у него в голове целая война происходит".

Прикольный факт: наш мозг обрабатывает примерно 11 миллионов бит информации в секунду. Но только 40-50 бит доходит до сознания. Остальное фильтруется или обрабатывается автоматически.

На деле в дизайне сайтов есть три главных когнитивных барьера:

1. Страх ошибки Классика жанра – форма заказа тура. Заказчик хочет минимум полей, "чтобы не спугнуть клиента". А клиент наоборот – боится что-то упустить, хочет больше контроля. Помню, как один пользователь на тестировании сказал: "Я не доверяю сайтам, где просят только телефон. Что они там за меня решать будут?"

2. Перегрузка выбором История с одним интернет-магазином на Битрикс. У них было 15 вариантов сортировки товаров. Думали, круто – пользователь сам выберет, как ему удобно. В итоге анализ показал, что 90% людей вообще не трогали эти фильтры. "Слишком много думать надо", – сказал один из тестировщиков.

3. Информационный шум Тут вспоминается случай с сайтом автосервиса. Владелец хотел запихнуть всю информацию на главную – и цены, и акции, и услуги, и статьи. "Пусть видят сразу всё!" На деле получилось как в старом анекдоте – кто в лес, кто по дрова. Пользователи просто терялись.

⚠️ Важный момент: когнитивные барьеры – это не про глупость пользователей. Это про то, как работает наш мозг.

Короче, сидим мы с тем турагентом, смотрим записи тестов. И тут его осенило: "Слушай, а давай сделаем два варианта просмотра – красивый с фотками для вдохновения и детальный для сравнения. Пусть человек сам выбирает, как ему удобнее?"

Сделали. И знаете что? Конверсия выросла на 34%. Потому что мы не пытались сломать когнитивные барьеры пользователей, а просто дали им возможность работать с сайтом так, как удобно их мозгу.

Практические инструменты️

Захожу как-то к клиенту на созвон, а он мне выдает: "Слушай, я тут накупил всяких инструментов для аналитики. Хотпжар поставил, вебвизор прикрутил, айтрекер заказал... А толку ноль!"

И вот сидит передо мной куча красивых отчётов, графиков, тепловых карт. А что с этим делать – непонятно. Ну реально, это как купить набор инструментов в строительном, а потом не знать, каким концом молоток держать.

Давайте я расскажу, как мы в итоге разобрались с этим добром

Начали с простого чек-листа

Первым делом составили список основных точек контакта с пользователем:

• Где люди чаще всего бросают корзину?
• В каких местах зависают дольше всего?
• Куда кликают, а куда нет?

Короче, как в детективе – ищем улики и следы пользователей на сайте

Поставили триггеры

Набросали список сигналов, на которые надо обращать внимание:

• Если человек три раза кликнул в одно место – что-то не так
• Если пролистал всю страницу за 2 секунды – контент не цепляет
• Если забил форму и не отправил – значит, что-то смущает

Прикол в том, что эти сигналы часто говорят больше, чем все дорогущие отчёты вместе взятые!

А теперь самое интересное – бонус трек

Взяли и поставили в офисе большой монитор. И начали каждое утро включать случайную запись сессии из Вебвизора. Всей командой смотрели, как реальные люди пользуются сайтом.

Знаете, что самое крутое в этом было? Через неделю такого просмотра дизайнеры сами начали говорить: "Блин, а тут же неудобно!", "Смотрите, человек явно не понимает, куда клацать!"

Фишка в том, что никакие графики и отчёты не заменят наблюдения за реальными пользователями.

Что в итоге получилось

1. Завели табличку "Быстрых фиксов"

   • Увидели проблему
   • Быстро поправили
   • Отследили результат

2. Создали карту болевых точек️

   • Красным отметили критичные места
   • Желтым – просто неудобные
   • Зеленым – те, что работают как надо

3. Внедрили "правило трёх кликов" Если пользователь не может найти что-то за три клика – значит, мы где-то накосячили с дизайном.

На прошлой неделе звонит этот клиент: "Слушай, а ведь работает! Конверсия выросла, отказы уменьшились. И главное – теперь понятно, что делать с этими данными!"

⚠️ Важно: инструменты это круто, но главное – научиться их готовить!

Работа с командой и заказчиками

"Заказчик всегда прав. Пока не начал платить" – народная мудрость веб-студий

Ключевая мысль: В работе над интерфейсами важно не то, что думает команда, а то, как это работает для пользователя.

Помню, сидим с командой, обсуждаем редизайн крупного маркетплейса. Дизайнер принес классные макеты, программисты кивают – всё технически реализуемо, менеджер улыбается – сроки хорошие. А я смотрю на это и думаю: "Вот сейчас всё похороним"

Достаю телефон, звоню случайному клиенту из базы: "Здрасьте! Можно 5 минут вашего времени? Покажу пару картинок."

"Лучше один раз увидеть, чем сто раз услышать мнение команды" – дзен UX-дизайнера

На деле получилось вот что. Пока мы тут сидели умные все такие, реальные пользователи продолжали покупать на старом сайте. У них там свои тропинки протоптаны, свои фишки и привычки.

Как мы теперь работаем с командой

1. Правило первого взгляда ? "Ребят, а давайте на секунду забудем, что мы крутые специалисты. Представим, что впервые видим этот интерфейс"

2. Метод бабушки ? Берем самого далекого от IT человека из семьи и показываем макеты. Если бабушка разобралась – значит, и остальные справятся.

3. Техника "А если..." ?

   • А если у пользователя медленный интернет?
   • А если он на маленьком телефоне?
   • А если он вообще первый раз на сайте?

⚠️ "Проблема не в том, что заказчик не понимает UX. Проблема в том, что он думает, что понимает"

История одного провала и успеха

Делали мы как-то админку для большого сервиса. Все были довольны – и команда, и заказчик. Запустили. А через неделю звонок: "Ребят, у нас операторы увольняться начали!"

Приезжаю в офис. Сажусь рядом с оператором. И тут до меня доходит – чтобы обработать один заказ, человеку нужно сделать 15 кликов вместо 5 на старой версии. Умножаем на 100 заказов в день...

Короче, за выходные переделали. Теперь первое правило – любой интерфейс тестируем на реальных пользователях. Не на заказчике, не на команде, а на тех, кто реально будет с этим работать.

Золотые правила работы с командой

1. Правило светофора ?

   • Красный – критичные проблемы юзабилити
   • Желтый – надо улучшить, но не горит
   • Зеленый – можно пока не трогать

2. Принцип трех "П"

   • Показать проблему
   • Подтвердить данными
   • Предложить решение

3. Закон бутерброда ? Между двумя слоями критики всегда должен быть слой позитива. Работает и с командой, и с заказчиками.

На прошлой неделе приходит тот самый заказчик маркетплейса: "Слушай, а ведь круто получилось! И конверсия выросла, и команда довольна. А главное – пользователи счастливы!"

 "В дизайне нет правых и виноватых. Есть только счастливые и несчастливые пользователи"

Заключение, или Как перестать бояться и полюбить когнитивные искажения

"Идеальный интерфейс как идеальный дворецкий – его не замечаешь, пока всё работает"

Ключевая мысль: Когнитивные искажения – это не баг, а фича человеческого мозга. Научитесь их готовить!‍?

Знаете, что общего между интерфейсом и котом? Оба делают что хотят, а не то, что от них ожидают!

Помню, сидим с заказчиком, обсуждаем очередной редизайн. Он такой серьёзный, в костюме, говорит: "Нам бы что-нибудь инновационное, прорывное!" А я ему: "Вот представьте, просыпаетесь вы утром, а у вас дома все двери наоборот открываются. Инновационно? Да! Удобно? Не очень..."

Чему нас научили все эти грабли

1. Закон грабельной механики Чем дороже проект, тем больнее по лбу прилетает, когда наступаешь на когнитивные грабли.

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

3. Принцип ленивого кота ? Пользователь как кот – пойдёт только туда, где ему удобно. И никакие модные дизайнерские лотки его не убедят.

⚠️ "Хороший интерфейс как хорошая шутка – если его надо объяснять, что-то пошло не так"

История на десерт

Приходит как-то клиент с сайтом доставки еды. Страшный как моя дипломная работа по PHP, но конверсия – огонь! Смотрим аналитику – пользователи носятся по сайту как тараканы по кухне, но заказывают так, что бухгалтерия не успевает считать.

Провели редизайн, сделали всё по канонам. Чисто, стильно, модно, молодёжно... И продажи упали. Знаете почему? Потому что в старом дизайне все кнопки были как боксёрские груши – большие и заметные. А в новом – как кнопки от рубашки, попробуй попади!

Мораль сей басни такова

1. Правило зубной щётки ? Не меняйте интерфейс чаще, чем зубную щётку. И так же постепенно.

2. Закон чайника ☕ Хороший интерфейс как заварочный чайник – должен быть удобным, а не только красивым. Иначе обожжётесь!

3. Принцип пиццы ? Лучше простой и работающий дизайн, чем навороченный, но непонятный. Как с пиццей – основа важнее топпингов.

 "В мире много дизайнеров, но мало тех, кто понимает, что кнопка 'Купить' важнее модного градиента"

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

Вот и с сайтами так же – иногда старая добрая кнопка лучше модного свайпа с тройным переворотом!

Короче, друзья, делайте интерфейсы как бутерброды – просто и понятно. А то ведь пользователь как ребёнок – если непонятно, он не будет есть!

Конец!

P.S. А вы знали, что эту статью прочитали до конца 73% пользователей? Шутка! На самом деле я понятия не имею, но раз вы здесь – значит, дизайн текста был достаточно удобным!