ClearSQL
UI&UX transformations in ClearSQL 9
ClearSQL 9 has become the most "visual" release of all – we made a giant leap towards a more intuitive user interface, leaving behind everything that can distract the user from fulfilling their major tasks. The reasons to take this step, the stages we went through, and the final results – below in this article.
Intro
ClearSQL 9 came out with a bunch of dramatic changes in the user interface, introducing the dark mode, entirely reorganized menus and toolbars, and a new set of icons, altogether so much affecting user interactions and the overall style of the app. The decision to redesign the UI was based on several reasons:
ClearSQL 9 came out with a bunch of dramatic changes in the user interface, introducing the dark mode, entirely reorganized menus and toolbars, and a new set of icons, altogether so much affecting user interactions and the overall style of the app. The decision to redesign the UI was based on several reasons:
- Help trial users run their first code analysis in a fewer number of steps.
- Guide the users through the possible workflows, from basic tasks to advanced scenarios.
- Improve the accessibility of the most frequently-used features while replacing or even removing the least popular ones.
- Give more freedom of choice to satisfy the users' visual preferences and habits.
- Refresh the total look of the app.
The last but not the least was the real user feedback, making it clear that the ClearSQL's UI needs a change.
Instant code analysis
Originally, running a first code analysis was a complex procedure. You had to start a new project, import scripts or database objects, preliminarily connecting to a database, create the project, and eventually run the analysis.
In ClearSQL 8, we added the ability to create a project from the startup screen, but the number of steps stayed the same (Fig.1):
Originally, running a first code analysis was a complex procedure. You had to start a new project, import scripts or database objects, preliminarily connecting to a database, create the project, and eventually run the analysis.
In ClearSQL 8, we added the ability to create a project from the startup screen, but the number of steps stayed the same (Fig.1):
Fig.1 – Creating a project from the welcome screen
By introducing instant analysis in ClearSQL 9, we reduced the procedure to just 2 steps: first you import the PL/SQL scripts and then wait until the analysis completes (Fig.2).
Fig.2 – Instant Analysis
It is perfect for the introductory stage and can be used later to get fast analysis results.
The advanced mode still exists, though. It comes in handy when you need to import scripts from a database, link them to sources, or arrange items in the project tree.
The advanced mode still exists, though. It comes in handy when you need to import scripts from a database, link them to sources, or arrange items in the project tree.
Menus and toolbars
ClearSQL is a feature-rich tool, which makes it much of a challenge to achieve high accessibility of features while avoiding overcomplicated UI, cluttered with buttons and drop-downs. In the previous versions, options were grouped by ten (10!) menus with several levels of submenus in each. What's more, high-level menus were duplicating context-sensitive commands so that the user could reach options both from the pop-up and main menu as well as from the main and local toolbars.
As the first step, we reduced the number of menus by half and reorganized the options in such a way that their order would guide the user through the typical ClearSQL workflows, like creating a project, importing scripts and objects, modifying the scripts, and finally running the analysis. Next, we removed context-dependent items from the main menu, at the same time getting rid of the rarely used options.
The toolbars have undergone serious changes, too. We removed all the toolbars except for the one in the main window and added only frequently used options. All other toolbars were either removed at all or reduced to the minimum, making the windows look more spacious (Fig.4).
As a finishing stroke, we applied a new set of icons, more vivid and attractive, and changed the size to 32x32px, increasing their clickability.
ClearSQL is a feature-rich tool, which makes it much of a challenge to achieve high accessibility of features while avoiding overcomplicated UI, cluttered with buttons and drop-downs. In the previous versions, options were grouped by ten (10!) menus with several levels of submenus in each. What's more, high-level menus were duplicating context-sensitive commands so that the user could reach options both from the pop-up and main menu as well as from the main and local toolbars.
As the first step, we reduced the number of menus by half and reorganized the options in such a way that their order would guide the user through the typical ClearSQL workflows, like creating a project, importing scripts and objects, modifying the scripts, and finally running the analysis. Next, we removed context-dependent items from the main menu, at the same time getting rid of the rarely used options.
The toolbars have undergone serious changes, too. We removed all the toolbars except for the one in the main window and added only frequently used options. All other toolbars were either removed at all or reduced to the minimum, making the windows look more spacious (Fig.4).
As a finishing stroke, we applied a new set of icons, more vivid and attractive, and changed the size to 32x32px, increasing their clickability.
Fig.3 – Toolbars in ClearSQL 8 vs. ClearSQL 9
Making use of the telemetry
How did we know the frequency of the options' usage? By analyzing the click rate. ClearSQL counts the number of clicks on the menu items and toolbar buttons and sends it to conquestsoftwaresolutions.com. The data collection is entirely anonymized and includes GUID (Globally Unique Identifier), product name and version, module name, action button name, number of clicks, and timestamp of the last click.
To disable it, go to Preferences > General and disable the "Let ClearSQL send feature clicks to improve UI&UX" option.
IMPORTANT: Telemetry does not have access to user data, and no user information or database records are ever collected, stored or transmitted by ClearSQL.
To disable it, go to Preferences > General and disable the "Let ClearSQL send feature clicks to improve UI&UX" option.
IMPORTANT: Telemetry does not have access to user data, and no user information or database records are ever collected, stored or transmitted by ClearSQL.
Global search
Intuitive user interface goes hand in hand with the powerful search engine, enabling the user to find whatever is being searched, most preferably from one place. Inspired by such tools as Spotlight on Mac, we optimized ClearSQL's search to look for code elements, scripts, code review results, rules, commands, and options, which are now instantly located by a double-click. Shortcuts appear in the search results too and you can now keep the search list open while working in the main window (Fig. 4).
Intuitive user interface goes hand in hand with the powerful search engine, enabling the user to find whatever is being searched, most preferably from one place. Inspired by such tools as Spotlight on Mac, we optimized ClearSQL's search to look for code elements, scripts, code review results, rules, commands, and options, which are now instantly located by a double-click. Shortcuts appear in the search results too and you can now keep the search list open while working in the main window (Fig. 4).
Fig.4 – Search tool
"Users made decisions faster, and just as accurately, with charts displayed in the dark theme."
UI themes
Following the trend for the dark mode that has steadily emerged over the last few years, we added the dark color palette to ClearSQL as well. According to the research carried out by Salesforce last year, "users made decisions faster, and just as accurately, with charts displayed in the dark theme," so the dark mode is not only a matter of style but the productivity that can be increased.
ClearSQL 9 suggests switching the color schemes as a first step after the installation and applies the new background on the fly, so you can instantly decide which look to use (Fig 5).
Following the trend for the dark mode that has steadily emerged over the last few years, we added the dark color palette to ClearSQL as well. According to the research carried out by Salesforce last year, "users made decisions faster, and just as accurately, with charts displayed in the dark theme," so the dark mode is not only a matter of style but the productivity that can be increased.
ClearSQL 9 suggests switching the color schemes as a first step after the installation and applies the new background on the fly, so you can instantly decide which look to use (Fig 5).
Fig.5 – Dark mode selection
Apart from the UI themes, we also added alternating colors to the grid view preferences and a dark color scheme to adjust the highlight of the code elements in the editor (Fig.6).
Fig.6 – Alternating colors in grids
With these drastic changes in the UI, we attempted to increase the users' performance while running daily code reviews and added some colors to the working routine. Have any ideas on how to make the tool even better? Send us your emails at customer-support@conquest-us.com or share your impressions of ClearSQL 9 on G2 Crowd, and receive guaranteed discounts from Conquest.
EXPLORE CONQUEST PRODUCTS
