Индикаторы

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

Ещё важнее, чтобы анимация проигрывалась сразу же после действия пользователя. Нажал на кнопку — индикатор появился моментально.

Примеры слева плохие. Первый — потому что внимание пользователя приковано к кнопке, а индикатор находится за её пределами. Во втором — цвет сменился, но кнопка всё ещё выглядит активной. В третьем — не видно, какой именно процесс ждёт пользователь.

Это особенно актуально для сайтов, оптимизированных по методу lazy loading, когда медиафайлы не загружаются, пока находятся за пределами экрана. Картинки начинают грузиться, только когда пользователь скроллит страницу. Если всё пойдёт не так быстро, как хотелось бы, посетитель увидит «скелет». Тогда он не подумает, что сайт дальше пустой, и подождёт.

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

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

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

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