Ticket #1367 (new)

Opened 3 years ago

Last modified 22 months ago

Nodewatcher UI has too much white space

Reported by: valentt Owned by:
Priority: normal Milestone:
Component: nodewatcher/frontend Version:
Keywords: Cc:
Related nodes: Realization state:
Blocking: Effort: normal
Blocked by: Security sensitive: no

Description

Currently Nodewatcher UI has too much white space, and everything is just stacked in rows - that way it uses too much screen space.

Nodewatcher 2.0 had maybe a bit cluttered UI, but you could much easier see more info.

Maybe we need a middle ground between Nodewatcher 2.0 and current V3 web ui.

Attachments

Selection_860.jpg (63.9 KB) - added by valentt 3 years ago.
current web ui for basic node info
Selection_860-ui.jpg (49.0 KB) - added by valentt 3 years ago.
proposed web ui for basic node info
IMG_3956.jpg (63.0 KB) - added by valentt 3 years ago.
beta web ui on iPhone (mobile safari)
Selection_860-v2.jpg (43.1 KB) - added by valentt 3 years ago.
left alligned, smaller fonts and reduces vertical white space between lines
Selection_126.png (85.2 KB) - added by valentt 3 years ago.
Selection_127.png (60.6 KB) - added by valentt 3 years ago.

Change History

Changed 3 years ago by valentt

current web ui for basic node info

Changed 3 years ago by valentt

proposed web ui for basic node info

comment:1 follow-up: ↓ 3 Changed 3 years ago by mitar

I think the current approach is good also for mobile.

comment:2 Changed 3 years ago by valentt

Here is how current web ui for basic node info looks like:
current web ui for basic node info

And this is proposed how same data can be shown in multiple rows and sawing vertical space:
proposed web ui for basic node info

Text beside "Network", "Monitored" and "Health" can be removed, and just displayed with "mouse over" event on icons. Icon and colour or the should be enough to relay node status.

Last edited 3 years ago by mitar (previous) (diff)

comment:3 in reply to: ↑ 1 Changed 3 years ago by valentt

Replying to mitar:

I think the current approach is good also for mobile.

I both agree and disagree.

I agree because mobile screen has less horizontal space and can be scrolled vertically.

And I disagree for same reason, because then you can easily make webpage really long and unusable because to see anything you need to scroll, and scroll, and scroll down...

These are just ideas, people with UI skill should definitely make the right choice here, but still maybe they hear some good suggestion from me :) If not just ignore me :)

Changed 3 years ago by valentt

beta web ui on iPhone (mobile safari)

comment:4 Changed 3 years ago by valentt

Reducing white spaces would probably make displaying V3 web ui better on mobile phones, because currently it is not mobile friendly:

beta web ui on iPhone (mobile safari)

Changed 3 years ago by valentt

left alligned, smaller fonts and reduces vertical white space between lines

comment:5 Changed 3 years ago by valentt

Here is another suggestion: left alligned, fonts reduced to 80% and reduces vertical white space between lines:

left alligned, smaller fonts and reduces vertical white space between lines

comment:6 follow-up: ↓ 7 Changed 3 years ago by lukacu

Moving things in Gimp is always easy, doing it in HTML requires more time. The current modular architecture of NW3 makes it difficult to create compact layouts the two column layout proposed above. You are more than welcome to provide a code-based solution to achieve the proposed result.

Regarding mobile version: we have not really addressed this issue so far. Bootstrap supports responsive layouts, but you still have to set the correct classes. If you want me to address a specific problem regarding errors in design you can open a new issue.

Also note that the current design is very customizable and will probably not satisfy everybody out-of-the-box, feel free to customize it on your installation as we will for wlan-si.

comment:7 in reply to: ↑ 6 Changed 3 years ago by valentt

Replying to lukacu:

Moving things in Gimp is always easy, doing it in HTML requires more time. The current modular architecture of NW3 makes it difficult to create compact layouts the two column layout proposed above. You are more than welcome to provide a code-based solution to achieve the proposed result.

Regarding mobile version: we have not really addressed this issue so far. Bootstrap supports responsive layouts, but you still have to set the correct classes. If you want me to address a specific problem regarding errors in design you can open a new issue.

Also note that the current design is very customizable and will probably not satisfy everybody out-of-the-box, feel free to customize it on your installation as we will for wlan-si.

Yes, I know that redesigning HTML is not trivial as with using GIMP. I have no expectation that you or anybody else goes and redesigns whole web site. Idea behind this post is just to start a dialogue and for UI designers to get some feedback.

Don't think of this ticket as a complaining because there is much, much more things all of you did really great. These are small issues that as you said anybody can change in their deployment if they wish to.

Last edited 3 years ago by valentt (previous) (diff)

comment:8 Changed 3 years ago by lukacu

Well, actually changing this could be quite challenging due to new nodewatcher design. I am not saying that it is impossible, but you would really have to hack the templates and CSS just to achieve it for a single plugin. If you then change your configuration, you may break the design easily.

comment:9 Changed 3 years ago by valentt

Are there any plans to make frontend responsive and usable on mobile phones?

comment:10 Changed 3 years ago by valentt

From pure users point of view I see NW V3 really stable as backend, one biggest thing that I see missing is mostly UI and UX. I'm definitely not an expert and I can't say that design is good or bad, just that whole web site is just now working for me... is this UI, UX, something else... don't ask me :)

But from users point of view I see some elements that just shouldn't be there, or should be done differently...

  • header of web page takes too much space (as screenshots showed)
  • map on node page is too big, takes too much space, should be small but expand on click
  • web ui should be responsive and usable on mobile phones/tablets
  • graphs
    • client graphs would make sense to make first graph in the list
    • hard to read, contrast needs to be much better
    • colors are blue, blackm green, orange and pink... just bad and unreadable on white background.
    • there are just too much of them, they are just slapped on the page
    • users can't choose which to hide and which graphs to show on page
    • some important graphs are missing while others present are useless
    • bad and not understandable labels on graphs
Last edited 3 years ago by valentt (previous) (diff)

Changed 3 years ago by valentt

comment:11 Changed 3 years ago by valentt

Example of unreadable graph:

Changed 3 years ago by valentt

comment:12 Changed 3 years ago by valentt

I have no idea what this graphs shows:


comment:13 Changed 22 months ago by valentt

To be clear - I know that there graphs show... but I really have to concentrate really hard to get some meaning from these graphs, so if they are half-useless for advanced users and admins they are completely useless for 95% of Nodewatcher users...

Note: See TracTickets for help on using tickets.