Лучшие статьи и кейсы стартапов
Включить уведомления
Дадим сигнал, когда появится
что-то суперстоящее.
Спасибо, не надо
Вопросы Проекты Вакансии
Антивирусная сеть для веб-сайтов
Рекомендуем
Продвинуть свой проект
Лучшие проекты за неделю
45
Битрикс24

Битрикс24

www.bitrix24.ru

15
GIFTD

GIFTD

giftd.tech

13
Aword

Aword

Приложение для изучения английских слов

12
Логомашина

Логомашина

logomachine.ru

12
Convead

Convead

convead.ru

11
Devicerra

Devicerra

devicerra.com

11
Eczo.bike

Eczo.bike

www.eczo.bike

11
Flowlu

Flowlu

flowlu.ru

10
Отследить-посылку

Отследить-посылку

отследить-посылку.рф

10
KEPLER LEADS

KEPLER LEADS

keplerleads.com

Показать следующие
Рейтинг проектов
Подписывайтесь на Спарк в Facebook

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

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

b_559699387e8d9.jpg

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

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

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

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

b_55969966d8df1.jpg

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

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

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

b_5596998f2a572.jpg

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

b_5596999fe694c.jpg

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

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

b_559699d46d5cd.jpg

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

b_559699e5bafc7.jpg

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

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

b_559699fdef196.jpg

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

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

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

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

+1
Первые Новые Популярные
GreenRed brand studio
разработка логотипа за 99$
Выбрать файл
Читайте далее
Загружаем…
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать