Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

A Survey of UI Layouts #1

Open
cilki opened this issue Feb 23, 2019 · 3 comments
Open

A Survey of UI Layouts #1

cilki opened this issue Feb 23, 2019 · 3 comments

Comments

@cilki
Copy link
Collaborator

cilki commented Feb 23, 2019

Most sysinfo UIs have a two or three panel design. One for a high-level overview of the system and one containing specific details organized in a list or tree.

Speccy

1499199380_speccy
Speccy probably has the overall best interface for it's simplicity. The information itself is organized into a tree which is intuitive and easy to navigate. Graphs are shown inline when asked, which is nice, but it seems like they should also be available somewhere else (together in one location).

Astra

astra32-56a6f95f3df78cf772913772
Astra duplicates a lot of information which I think should be generally avoided. Astra's tree also mimics the Windows device manager which can become very deep for some components.

PC Wizard

pc-wizard-release_2
The menu panel on the left is hideous, but I like how a high-level description is given for each category in the upper panel and the details are in the lower panel.

Design Takeaways

  • Don't duplicate information
  • Don't use large unlabeled icons
  • Don't overdo it with trees
  • Simple is better

I think we should go for a two panel layout with a small header section at the top containing version information, etc. The "categories" panel would be a list of categories which changes what's displayed in the main panel. The main panel would be organized as a tree, list, or whatever layout is most appropriate for the data.

Any other ideas?

@cilki
Copy link
Collaborator Author

cilki commented Feb 23, 2019

2019-02-22-201449_919x639_scrot

Here's an example of the header I was talking about.

@dbwiddis
Copy link
Member

I definitely like the single panel on the left with descriptive words. The Speccy layout is a good example.

When there is lots of info, the right hand side should be split into two panes, upper/lower. The upper will have info for the whole system (e.g., for processor, various overall system CPU specs, or for the OS, the version and build stuff, for networks the IP and gateway) while the bottom half could have a scrollable table (per-processor ticks, or process list, for networks the list of IFs, etc.)

@dbwiddis
Copy link
Member

Here's apple's take on what I just said.
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants