Укрощение интерфейса антивируса

52b3147395264c0d823676d32b3530b0.png

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

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

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


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

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

26e346a4e9084de2ad4292c29b36bb3e.jpg

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

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

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


767c799545d84852b2cf1c66ea0a676b.jpg

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

ce10bbcb63f142ffa9c2ce017aadc4eb.png

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

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

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

10f7ab927f844e6ea716f7edb2b8577d.png

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

97028b89b36946619d48f4f0ece78c46.png

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

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

9af37d4b1b7144aeaf4ade47f946da2c.jpg

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

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

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

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

© Habrahabr.ru