Taming the antivirus interface

Today we will talk about how we designed the antivirus interface for sites , what difficulties we faced in the pursuit of the best UX, and how we had to revise traditional views on the organization of such interfaces.



So, we faced the task of creating an antivirus interface for sites. It should be convenient, simple and fast. We have already written about speed and design approach on layers in previous posts. Service Virusay includes five tools. Here I will talk about the layout and functionality of the elements of the first of them - antivirus.

')

Access to the tool

In traditional desktop antivirus software, you check one device (or several disks on it). Everyone knows what the interface of such antivirus looks like. Everyone got used to it.



We also have to check at the same time many sites and the traditional approach does not work here. The interface in which multiple sites are checked at the same time should look a little different. We decided that the user's work will begin with a list of his sites, which he connected to the antivirus. This will be the starting point of the interface. List of sites - a summary list, which displays the most important information about the user's sites. These are indicators of infection, times of the last and next checks, the statuses of the included protection, etc. It also starts the scan / treatment.







But one list is not enough. For antivirus, scan and treatment reports are important. In our case, they were still associated with the file editor and repository.



It was decided when clicking on a block of a specific site from the list to show the antivirus tool for the selected site. So the user will always know that at the moment he is working with an antivirus tool on a selected site from the list. We placed all our tools on separate layers. Layers go smoothly from right to left, overlapping part of the site list area. The currently selected site remains highlighted in the list.

Antivirus tool

Turning to work with the antivirus for the selected site, the person sees detailed information about the status and history of infections. Scanning / disinfection can also be launched from this tool — the launch button repeats the same button on the list of sites (which remains visible all the time). When you click on the scan button on the list of sites or on the antivirus tool, the action is displayed in both places at once, which further binds the tool with the list for the user.







Self scanning / treatment looks quite interesting. As in the usual anti-virus software, scanned directories scan through the eyes, the number of infected infections and suspicions changes, a real-time scan report is generated, which, like the scanning progress, has a percentage completion indicator.



The scanning and treatment process today takes an average of 12 seconds per site. It's great.



Additionally Virusay checks for the presence of the site in the black lists of search engines. We have made this indicator in the form of a clickable icon of the skull. By clicking, you can find out in which blacklists the site is present and obtain data on the time the site was eliminated from it after the end of treatment.







When the threat on the site is detected, the anti-virus block turns red (by default it is white), and a red marker appears on the list’s left in the list. We brought the automatic treatment switch to the antivirus panel and also duplicated it in the general settings of the site. Actually, the full set of settings is present in the settings panel of the site, but the most popular are duplicated on the tools.







Under the main display unit, we have posted a visual diagram of site infections. So you can immediately see at what time period the site was infected.



Below we display a list of reports on the scanning and treatment of the site - this is where the most interesting begins. When you click on a block with a report, another tool appears - a report overview.







The report shows a list of the affected files found. From here you can go to view the content of each of them. If the file has not yet been treated, the malicious code is highlighted. If you have been treated, the version of the file to the “before treatment” state can be viewed and restored (we placed the switcher at the top of the tool).



The file editor will allow you to manually remove the code snippet, if you do not want to use the automatic treatment or it is not available for this virus.



You can add files to the exclusion list from the scan report if you think they are not dangerous. To do this, simply click on the "+" icon to the left of the file. Files from the exclusion list are deleted in the same way. Of course, it is worth mentioning that everything happens instantly and without reloading the content of the page or a separate area.



Such a “lively” and clear interface allowed us to achieve high UX performance. In addition, the approach to architecture is unconventional for web interfaces, which also had a positive impact on the experience of interaction.