Ask for feedback: User Interface Rework

[aronmolnar]

🎉 The first draft of our UI rework is done.

Before we go to production, we kindly ask for your feedback.
Get a preview the UI at our playground: {no longer active}

Note that this is our testing branch. If you find any bugs, please just comment to this ticket.

We're looking forward to your feedback.

[vysecurity]

Don't like the dark mode tbh. Though UI looks good?

[aronmolnar]

In general or this dark mode?

You can switch to light mode via user account icon at top right

[vysecurity]

I think that the report will be in white background, black text. So it doesn't make sense to use a dark mode as it doesn't reflect the same feel.

[aronmolnar]

Got it.
There's a light mode fortunately 😄

[gbrls]

I don't like that the other menu options are hidden this way. I liked that before it was easy to see basically all the menus and reach them within a single click. I don't like that in this new design the left bar hides those options

[vysecurity]

I also agree on the menu items somewhat. For some users you want the menu items to be static and accessible (there's not exactly a lot of menu items anyway). It's faster to directly click on the item than it is to open a menu and find it then click on it.

[aronmolnar]

This is true, but more menu items also come along with opportunity costs (more rarely used items take place and make it harder for users to find the often used elements).

Not sure how often you have to open those menu items (Designer, Users) from a project. (And if, you'll open it in a new tab.)

Technically, I think that it is not feasible to allow to make the main menu sticky, am I right @MWedl?

[MWedl]

What do you mean exactly with making the menu sticky? Adding a option to make the menu always visible (similar to the collapse/expand button in the second-level menus)? This would be technically feasible, but I'm not sure if this a good idea. When you are writing a report you then have 3 menus stacked on the left. These menus take up over 1/3rd of the screen width, leaving less space for actual content. The content area needs to be big in order to have enough space for writing markdown, especially in split-mode (with the MD-editor and preview side-by-side) or for smaller screens or when using two browser windows side-by-side (e.g. finding on the left side and notes to the right)). This proposal is contrary what we wanted to achieve with the UI rework: have more space for the main content area where you spend most time in, doing actual reporting tasks.

[aronmolnar]

We decided to wait for more feedback on this.

[gbrls]

Ok, now I understand why you did this. I'm not sure how to make it better, but this new way is very unintuitive for me, before it made much more sense, even from the first time that I opened the software. That's my feedback.

[JamHaven]

Layout

The layout makes navigating smooth and I like the changes. Especially the folable menu on the left when working on a project. I would still love to see some improvements to the "+ Add"-Button at the bottom of the screen, especially on the notes page. Maybe some small "+" at the top ot the screen? Sometimes I have to look for that button, even though I use Sysreptor daily.

Design:

I personally liked the blue look with the old logo more. The new design gives more of a "Another corporate software" look, which is fine, but I feel the heart is missing (little T-Rex I miss you already).

[aronmolnar]

The first option works, but then I would remove the lower Add button. (The second does not work. Nobody would find this button and expect something else.)

Notion has two buttons (at the top and the bottom, but due to the different wording I expect different things; not solved perfectly, I believe).

I like the solution Joplin provides. At the top a search bar and different buttons for checks and for notes.
The downside is, that it's not clearly communicated that those actions add new notes.

This might be improved by better icons, e.g.

What I like about this is that it probably improves the adoption of checklists.

Obsidian follows a similar approach.

What do you think, @MWedl?

[cmahrl]

I like the idea of an action bar at the top. Icons are often self-explanatory. We also considered this in a UI draft. However, it should be consistent throughout the UI e.g. this should then also be considered for the reporting sidebar and the notes sidebar in a project. Because currently, if you want to add a finding, you would also find the Add button at the bottom (same case).

[MWedl]

The add-button on top will work fine for notes. For findings, however, it does not make sense to move the add-button to the top, because there are also sections. If we moved the button to the top, the order would be: 1. add finding button, 2. section list, 3. finding list.

We could add the button as a small icon besides the findings sub-headline in the list (similar to the change sort-mode button). I do not like this solution, because the add-button would be much smaller, less prominent and harder to click.

[aronmolnar]

I also believe that there cannot be a fully consistent solution for notes and findings.

I think, however, that an additional button at the findings section could make sense. If we add it to the right of the "Findings" title (instead of beside the sort icon), we could make it a bit larger. But any solution there must be supplementary.

[aronmolnar]

For notes we will remove the button at the bottom and create two icons to create new notes at the top.

For findings, we will add a "+" icon right beside the "Findings" heading but we'll additionally have the existing "Add" button at the bottom.

We take the inconsistency into account.

[cmahrl]

it could also be a moving Add button, that sticks to the button, when to many finding / notes are added. Could work for both Notes and Findings. So at the beginning, the button would be at the top.

IMHO I'd go for something consistent. Having to search the add button on different sub pages with very similar behavior is not ideal.

[aronmolnar]

User interface rework was deployed with last update.