System Settings Proposal (Look And Feel)
OpenPublic

Mock History

Current Revision3

Mock Description

A new mockup with possible elements present in upcoming System Settings version.

(David- all focus should be on the view of the right of the sidebar)

abetts created System Settings Proposal (Added Elements).Oct 17 2017, 7:15 PM
abetts added an image: SystemThemeMockup.png.
abetts added a subscriber: davidedmundson.
davidedmundson updated the mock's description. (Show Details)Oct 18 2017, 8:57 AM
davidedmundson added a subscriber: mart.

Cool, I want to push forward with this.

IMHO we can pretty much use the exact same design for:

  • L&F
  • DesktopTheme
  • KSplash
  • Image wallpaper
  • SDDM

ok with that?

I have a tonne of questions. Don't be put off by them!

Inline Comments

An item in a view can have one of 3 flags:

  • selected
  • mouse over
  • keyboard focus

and any combination (giving 9 possibilities!)

Can you describe (either in words or pictures) how we should react to each of those?

I assume this is "install new"

In "Desktop Theme" we have install from file and install from internet as separate buttons.

We can combine them; but we need a UI for that somewhere.

I can guess what these 3 icons should do, but can you explain?

Also when do they appear?

I hope I can answer this:

I am ok with designs that are similar. I think more and more in the future we will see designs like these, column-based, much because of the influence of mobile in the industry. I think we can use them, transform them and make them even better. We just need to also take each app one at a time and give each their own personality.

1. Inline Comment

An item can have 3 flags.

Selected, I imagine this one as having a thin blue line for selection
Mouse Over, on hover, this item would display the edit, upload or delete button but NOT the blue ring of selection. I feel that we overuse mouse over throughout Plasma. It makes the system feel "loud," asking for attention. My perception is that we can make plasma a little more "quiet." by empowering the mouse pointer instead. This is a personal opinion, I don't know how the rest of the team feels about it.
Keyboard Focus, keyboard focus can be the same as "Selected" with a thin blue ring around the item

2. Inline Comment

Can you describe (either in words or pictures) how we should react to each of those?

Yes, my perception is that users will notice the plus sign (whatever shape we settle on) but be a universal button for ADDING content into the list. This is not consistent everywhere as different KCMs allow one way of adding content and not another. For example, we can't seem to be able to install Grub images from GHNS but only from file. But, my idea is to make users rely on a big button with an add indicator icon that will clue them into adding more themes, icon themes, etc to a list. I would have to design the GHNS popup window that will come up. (Maybe I can ask Andreas K about it. I think he was working on something similar some time ago).

3. Inline Comment

I can guess what these 3 icons should do, but can you explain? Also when do they appear?

In my mind, these three icons will replace the many icons we have scattered around many of our edit fields for adding, moving up, down, edit, remove, remove all, etc. I am trying to shrink the selection to something meaningful and only add "odd" or "uncommon" buttons around our fields.
X, is for delete such item
Cloud, is to upload for those themes where our changes can be sent up to KDE-Look. Colors for example.
Pencil, is for edit. Edit, where possible, the parameters of such item.

They will display on mouse over, or hover. The item will darken revealing the 3 icons.

Selected, I imagine this one as having a thin blue line for selection
Keyboard Focus, keyboard focus can be the same as "Selected" with a thin blue ring around the item

I don't like this, it means if you are doing this with the keyboard you literally can't see what's selected and what's focussed.
Can we do an underline on the text for keyboard focus? (like Dolphin) Or do the two blue shades, like the bar on the left of system settings.

I know our current QtQuick KCMs have terrible keyboard nav, but it's something we should fix moving forwards from the ground up.


This is not consistent everywhere as different KCMs allow one way of adding content and not another.

Yeah. As a pre-emptive step, should we try to add "Install from local file" into the "Get Hot New Stuff" dialog?


Can you check if we have the right icons in breeze/actions ?

Can we do an underline on the text for keyboard focus? (like Dolphin) Or do the two blue shades, like the bar on the left of system settings.

I think this could add "too much" highlighting to the item. What about this? We have the blue line around the item and ALSO have the edit buttons show. The ones where the item gets dark and delete, upload and edit show up. I think that would be pretty obvious to where your keys are. It would also be consistent with the rest of the UI.

Yeah. As a pre-emptive step, should we try to add "Install from local file" into the "Get Hot New Stuff" dialog?

This would be my preference

Right now the GHNS icon is a star. Not sure if it comes across as "install new things." It seems more like "Favorite" or ratings. We might need to create a better icon.

Here you can see the full "alpha" graphic design for the entire System Settings. You can find more info in the rest of the design.

System Settings Alpha Graphic Redesign

davidedmundson renamed this mock from System Settings Proposal (Added Elements) to System Settings Proposal (Desktop Theme).Oct 24 2017, 2:36 PM
romangg renamed this mock from System Settings Proposal (Desktop Theme) to System Settings Proposal (Look And Feel).