UI/UX Design Suggestions

[louis-ym4]

Is there an existing issue for this?

• [x] I have searched the existing issues.

Describe the solution you'd like

A few suggestions on how to improve the User experience and design:

1. Left align the columns in the inspect screen for faster and easier searching
2. Increase margin between rows for the same reasons and better readability
3. Navigation and bottom bar are currently very loud. Signal colors work best when used scarcely and to indicate important information / indicate a next step

See image below for orientation

4. Increase padding on cards / settings buttons

5. Favorite star in overview - active state fill on the star itself instead of button with fill and also increase the distance between text and yellow/blue bar

6. On the start screen the button to start is currently a little lost and the rocket has low context, simply adding a text "start monitoring" or similar would also help a lot here. In addition move it up and widen it for visual alignment

In this image here we can also see clearly why the header and bottom bar in full color are not optimal.

As we can see in the image the navigation and bottom bar create a loss of hierarchy, no single element is the highest because there are 3 spots in which the main color is heavily used.

Below are some concept designs i created to showcase how the changes listed above could improve the usability of sniffnet and a modern, minimal appearance .

Is your feature request related to a problem?

No response

[GyulyVGC]

Hey @louis-ym4 that's some crazy nice work you did! I hope it didn't take you too much time to realise these sketches.

I will definitely use some of your ideas as inspiration for the future.

[GyulyVGC]

@all-contributors please add @louis-ym4 for design.

[allcontributors[bot]]

@GyulyVGC

I've put up a pull request to add @louis-ym4! :tada:

[GyulyVGC]

Hey @louis-ym4 I forgot to mention that what I believe needs the most design improvements right now is the connection details popup.

What's particularly annoying is that the text isn't centered... I've tried to do so but it was looking even worse since the textual rows can have very different lengths...

Can you maybe give it a quick look?