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

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

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


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

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



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

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

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




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



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

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

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



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



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

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



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

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

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

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

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


  1. toxicdream
    03.07.2015 15:10
    +3

    Надо кому-нибудь замутить файлообменник под именем «ЕстьЧё»…
    И фотоальбом «Светани»!
    xD


    1. tegArt Автор
      03.07.2015 15:13
      -1

      Так в чем вопрос — дерзайте, потом поделитесь опытом :)


  1. damat
    03.07.2015 17:47

    Если не секрет, расскажите подробнее про:

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

    — что такое «высокие показатели UX»? Как они измеряются?
    — в чем нетрадиционность подхода к архитектуре? и что конкретно имеется в виду? из статьи не понял
    — как проверяли положительное влияние на опыт взаимодействия? И кто с кем взаимодействовал? Пользователи?


    1. tegArt Автор
      03.07.2015 18:03

      1.3. влияние на различные конверсии;
      2. это уже больше относится к общей концепции интерфейса, описанной в предыдущей статье про перекрывающиеся слои.