Как стать автором
Обновить

Советы по проектированию интерфейса. Часть 2 — Когнитивное искажение

Время на прочтение3 мин
Количество просмотров3K

На наше пользовательское поведение и наши психические процессы зачастую (если не всегда) очень серьезно влияют Когнитивные эффекты. Память, мышление, восприятие, внимание - это вот все про них, про эти эффекты.

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

Попробую рассказать про несколько эффектов, как всегда с откопанными примерами, и с небольшими советами:)

Эффект Фон Ресторффа или эффект изоляции

Речь идет об изоляции какого-либо объекта. Смысл в том, чтобы визуально выделить его и отделить от похожих на него объектов. К примеру кнопки СТА всегда выглядят иначе остальных. Это некая подсказка пользователю, для того чтобы он принял какие-то меры. Или вот когда нам нужно разделить две кнопки так, чтобы пользователь понимал, где призыв к действию, а где дегенеративное действие. Нам необходимо, чтобы пользователь помнил про это отличие на протяжении всего цикла щупанья продукта, в этом весь смысл.

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

Пример использования

  1. На главной странице. В примере ниже, кнопка СТА хорошо выделена яркостью, большой формой и иконкой движения.

1. Пример с сайта dribble
1. Пример с сайта dribble
  1. В листинге. В то время когда пользователь изучает листинг товаров, его внимание, например, может привлечь карточка с выделенной скидкой, или карточка обладающая особенными свойствами. Таким образом этот товар будет доминировать среди множества представленных. Этот эффект используют при наведении на блоки, и блок принимает свойство увеличения или выделения.

    2. Пример с сайта Enkai
    2. Пример с сайта Enkai

Эффект серийной позиции

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

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

Пример использования

  1. Применяя фильтр постепенной вложенности, мы информируем пользователя о том, как он продвигается в своем путешествии на извилистой дороге покупок, помогая с легкостью ему найти подходящий товар. Здесь следует учитывать то, что нагрузка на внимание должна быть минимальной. Не более 5 объектов, иначе все накопленное внимание может улетучиться.
    Эту последовательность действия можно рассмотреть на сайте фарфетч

1. Пример с сайта FARFETCH
1. Пример с сайта FARFETCH
  1. Немного креативных примеров. На сайте Apple на первой странице мы видим крупное фото продукта, которое подчеркивает его формы. Далее нас знакомят с характеристиками продукта. И наконец проскролив всю информацию о продукте, мы видим демонстрацию множества экранов, показывая все многообразие интерфейса для закрепления.

2. Первый экран сайта Apple
2. Первый экран сайта Apple
2.1 Последний экран сайта Apple
2.1 Последний экран сайта Apple

Эффект Зейгарник

Обычно, мы помним наши незавершенные и прерванные задачи намного лучше, чем те, что были завершены. Допустим, что на работе ты чего-то там не успел. Допустим еще точнее, ты не закрыл свою рабочую таску, хотя весь день (а может и больше) мечтал об этом. И вот ты едешь в метро домой, пытаешься расслабиться, возможно что-то полезное почитать, но эта назойливая таска жужжит рядом с головой как шмель, или свербит как дефолтная песня из радиочартов. Вряд ли тебе удасться забыть ее просто так, по собственному желанию.

Когда мы искусственно создаем продвижение к цели, это повышает мотивацию пользователя завершить задачу. Этот эффект можно заметить на формах оформления кредита, или заполнения длинных форм регистрации. Четкая индикация продвижения позволяет пользователю быть более вовлеченным в процесс.

Пример использования

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

 

Экраны нотификации и приложения Дуолинго
Экраны нотификации и приложения Дуолинго

Теги:
Хабы:
Рейтинг0
Комментарии1

Публикации