5 советов по реализации обратной связи в редакторе

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



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

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

2 контекста обратной связи


Обратная связь для пользователя реализуется в двух контекстах: физическом и эмоциональном. Физический означает «где на странице?», эмоциональный – «каков результат воздействия пользователя?».

Одним из самых распространенных примеров физического контекста является корзина. Покупатель нажимает кнопку «Положить в корзину» и ожидает УВИДЕТЬ этот процесс, так как в нем сформирована метафора реального магазина с тележкой.

Эмоциональный контекст сообщает пользователю о положительном или отрицательном результате его действий. Это может быть сообщение об ошибке или о том, что пользователь успешно вошел в систему.

Продавцу нужен язык, покупателю — глаза


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

Индикатор загрузки.

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


В конструкторе pixli нет виджета загрузки, но есть возможность добавить html-код, в котором вы можете указать свою собственную реализацию.


Статус загрузки.

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


В конструкторе это реализуется аналогично предыдущему пункту – с помощью кода.

Подсветка при наведении.

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


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


Достаточно указать цвет элемента в статусе «При наведении».


Сообщение об ошибке.

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


На первом рисунке вариант, который еще 5 лет назад встречался повсеместно.


Насколько удобнее современный вариант:


Пользователь получает пояснения по каждому полю, а не по всем одновременно.

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


Метки в формах.

Обозначьте поля формы поясняющими надписями или всплывающими подсказками. Когда пользователь видит, что он должен ввести, он делает меньше ошибок.


В конструкторе нужно указать значение при создании поля.

Вывод


Не бросайте тапками в тех, кто твердит прописные истины. Если найдется хотя бы один человек, кто хлопнет себя по лбу и воскликнет: «Чуть не забыл! Спасибо что напомнили!», значит, цель уже достигнута.

Парадоксально, но все описанные действия выполняются настолько легко, что о них можно забыть. И упустить продуманный отклик на действия пользователя. Тогда все усилия будут напрасны – неосознанное разочарование не сделает посетителя вашим постоянным клиентом.
18 февраля 2017, 16:23    Ivan Web-дизайн 0    16 0

Комментарии (2)

  1. Бугров Денис 21 февраля 2017, 06:24 # 0
    Еще бы маску ввода ко всему этому вернуть) Я бы два-три раза себя по лбу хлопнул))
    1. Ivan 25 февраля 2017, 17:48 # 0
      В следующей статье вернули:-)

    Вы должны авторизоваться, чтобы оставлять комментарии.