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

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

Доступ к инструменту

В традиционных десктопных антивирусах вы проверяете одно устройство (или несколько дисков на нем). Все знают как выглядит интерфейс подобного антивируса. Все к нему привыкли.

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



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

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

Инструмент антивируса

Перейдя к работе с антивирусом для выбранного сайта человек видит подробную информацию о статусе и истории заражений. Сканирование/лечение можно также запустить из этого инструмента — кнопка запуска повторяет такую же кнопку на списке сайтов (который остается видимым все время). При нажатии на кнопку сканирования на списке сайтов или на инструменте антивируса действие отображается сразу в обоих местах, что еще сильнее связывает для пользователя инструмент со списком.



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

Процесс сканирования и лечения сегодня в среднем по сервису занимает 12 секунд на 1 сайт. Это здорово.

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



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



Под основным блоком индикации мы разместили наглядную диаграмму заражений сайта. Так сразу видно в какой период времени сайт был заражен.

Ниже мы выводим список отчетов о сканировании и лечении сайта — вот тут и начинается самое интересное. При клике на блок с отчетом появляется еще один инструмент — обзор отчета.



В отчете показывается список найденных пораженных файлов. Отсюда можно перейти к просмотру контента каждого из них. Если файл еще не лечился — вредоносный код подсвечивается. Если лечился, версию файла на состояние “до лечения” можно посмотреть и восстановить (свитчер мы разместили вверху инструмента).

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

Из отчета о сканировании можно добавить файлы в список исключений, если вы считаете, что они не представляют опасности. Для этого достаточно просто нажать на иконку "+" слева от файла. Удаляются файлы из списка исключений точно так же. Конечно, стоит упомянуть, что все происходит мгновенно и без перезагрузки контента страницы или отдельной области.

Такой «живой» и понятный интерфейс позволил нам добиться высоких показателей UX. Кроме того, сам подход к архитектуре нетрадиционен для веб-интерфейсов, что тоже положительно сказалось на опыте взаимодействия.