Научите интерфейс общаться с пользователем

Как то раз, сидя напротив коллеги, я задал ему вопрос. Тот продолжал стучать по клавиатуре, уставившись в монитор. Не будучи уверен, услышал ли он меня, я повторил вопрос, на этот раз громче. Коллега, не отрывая глаз от монитора, пробурчал, слегка раздражённо: «Я слышал, что ты спросил, я просто думаю над ответом». На что я парировал, что он мог бы дать мне как-то знать, что не готов ответить сразу.

Причём, я вовсе и не ожидал от него немедленного ответа, да и вслух он мог ничего не говорить. Мог бы просто закатить глаза и принять глубокомысленную позу. Для меня важно было в этот момент понять, услышал ли он меня.

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

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

Кстати, в целом, решение с курсором очень неплохое, хотя, на мой взгляд, и оно не лишено недостатков. Можно ведь просто не заметить крохотные песочные часы, появившиеся рядом со стрелкой курсора.

К тому же, если программа загружается очень долго, как, к примеру, мой любимый Firefox, курсор вернётся к исходному виду, а я останусь в неведении, запускается ли браузер или стоит кликнуть ещё раз по ярлыку.

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

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

Даже обычная ссылка может и, скорее всего, должна реагировать не только на наведение курсора, но и на клик. Отобразить это можно по разному, хотя бы вот так:

 a:focus {color: red}

В особенности же это актуально для тех интерактивных элементов, которые работают по технологии AJAX, где обмен данными браузера с веб-сервером происходит в «фоновом» режиме.

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

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

Вот пример: любой видеоролик на youtube начинается с анимированного кольца, которое появляется сразу после клика на кнопку «play».

Другой пример: на моём телефоне установлена программа Google Maps и при запуске на экране не только отображается сообщение «загрузка», но и появляется анимированное многоточие. Таким образом, я хоть и не знаю, сколько именно времени потребуется на загрузку, или поиск спутников, но вижу, что программа работает и реагирует на мои действия.