Reply to topic

[Design Project] System Settings

User avatar ken300
Registered Member
Posts
312
Karma
0
+1 for what Colomar just said about the search function.

I like CTown's earlier idea of having something in the search results to identify which category the search result had come from (ie. 'Appearance - Icons- Emoticons' rather than just 'Emoticons') whether the results are presented in a list below the search field (like CTown's mockups on the previous page) or in the scrollarea itself (like alake's mockups earlier on this page). I think alakes ones look really good.

One of the big issues with the 'big blue toolbar across the top' layout is the amount of vertical space it takes up. Anditosan's mockups are very tall & narrow so it isn't an issue, but in a more regular 'landscape' window layout, the toolbar would, IMO make it feel cramped as soon as a few items appeared in the scrollarea - I was trying to think of solutions rather than whining about how it wouldn't work very well!
User avatar colomar
Registered Member
Posts
912
Karma
1
OS

Re: [Design Project] System Settings

Sun Jun 22, 2014 10:00 am
ken300 wrote:One of the big issues with the 'big blue toolbar across the top' layout is the amount of vertical space it takes up. Anditosan's mockups are very tall & narrow so it isn't an issue, but in a more regular 'landscape' window layout, the toolbar would, IMO make it feel cramped as soon as a few items appeared in the scrollarea - I was trying to think of solutions rather than whining about how it wouldn't work very well!


Yes, you were doing it absolutely right! Sorry for the non-constructive feedback.
Okay, well, toolbars are a standard component of applications, although the "toolbar" here isn't exactly a toolbar but a combination of toolbar and navigation bar. Still, maybe the problem is just that it's much taller than usual toolbars. Therefore if it would just be made a little lower, it could still work.
User avatar ken300
Registered Member
Posts
312
Karma
0
Colomar,

I've just checked out Google+ on the desktop & see what you mean when you said

Yes, Google does that a lot, and for example in Google+, it doesn't work well. When I'm way down in my stream and want to search for something, I have to scroll all the way up, which is horribly annoying.


What i was suggesting was maybe the big blue toolbar across the top of the SySe window might work better if we had a way of hiding/revealing it when needed. My suggestion of automatically hiding it as soon the scrollarea's full and revealing it again as soon as you start scrolling up was intended exactly to avoid having to scroll all the way up to the top of the screen to expose the blue toolbar and navigate to another top level category like you have to on G+ on the desktop.

An alternative would be to hide the blue toolbar when the scrollarea becomes full and reveal it when the 'Alt' key is pressed like Firefox does now with its menubar.
User avatar Heiko Tietze
Registered Member
Posts
534
Karma
0
OS
A better example would be Opera (mobile only?): The navbar is hidden on scrolling down but immediately shown if you scroll up. But I don't think this behavior makes sense for desktop applications. Basically it was introduced for small screens, or potentially small in case of web sites. I don't know any desktop application that applies this behavior; there is rather a full screen view instead (like for office tools). Is there really a use case to maximize the view area for system settings?
User avatar ken300
Registered Member
Posts
312
Karma
0
Heiko,

Whilst maximising space was one reason for suggesting hiding the toolbar, the main reason was to avoid SySe looking cluttered.

Whether the toolbar does actually need hiding depends on how complex the actual settings pages themselves are when they're done, but knowing KDE they probably aren't going to be super simple like the ones in Gnome etc...
mgraesslin
KDE Developer
Posts
538
Karma
6
OS

Re: [Design Project] System Settings

Fri Jun 27, 2014 12:58 pm
sebas told me to reply here :-) He just showed me the patch to reorganize the KWin settings modules and I disagree in one point: effects under windowbehavior. Effects are not exclusively about windowbhevior - if at all the animations could count as that. But e.g. desktod grid or mouse mark effect are hardly anything with window behavior. So I would suggest to use a better suited setting module.
User avatar Heiko Tietze
Registered Member
Posts
534
Karma
0
OS
mgraesslin wrote:sebas told me to reply here :-)

Almost the right place. But the organization is discussed in another thread, and to keep this thread plain I replied there: viewtopic.php?f=285&t=121053&p=314180#p314180
User avatar Hans
Administrator
Posts
3281
Karma
20
OS
New idea related to top and side navigation, as well as basic/advanced settings.

A lot of different thoughts led to this single idea. There are many things I want to say, but I'll try to be brief:

Problem
  • Some people have commented that having the navigation spread horizontally and vertically can feel weird.
  • Personally I think the settings are too hard to discover for new users. Most are just characterized by an icon and a word, such as "Search". What exactly can I expect to find here? Internet search? A tool to search for files? etc. The sidebar in the previous mockups seems to be catered toward users who are familiar with the settings and want to navigate around quickly.
  • For the reason above I wanted to have an "Overview" page that showed all modules within a top category, and a short description of what each module contains. I guess something similar to the Windows control panel:
  • I still wanted to keep the sidebar for quick navigation. However, in that case the same modules would be shown twice, once in the sidebar and once in the main view. That sounds confusing. (For what it's worth, the current System Settings does that with Tree View.)
  • On the other hand, it's a bit strange to show the first module when a user chooses a top-level category, as if that module is more important than the other modules in the category.

Suggestion

That's when I came up with this idea that could potentially address the issues above, as well as provide simpler settings ("basic" settings vs advanced settings) that people have suggested before, and that I've been arguing against. Here's a mockup based on the great graphics created by anditosan (please ignore unimportant stuff like spacing, fonts, the missing scrollbar, and that weird icon):



Explained in words:
The idea is to have an "Overview" page for each top-level category. This page would show all modules within that category, a short description of the modules, and in some cases the most basic settings for the modules. Each module would have to define what it should show here. For example, the "Application Style" module could allow you to change the application style, "Search" could allow you to enable/disable the file indexer, etc. Basically this page would contain the settings that a common user would most likely want to change. Further, rather than showing a few selected options, some modules could show a simplified version of the settings here. For example, "Font" could simply allow you to change all fonts and let you choose "Small", "Normal", "Large", "Huge" font sizes, while the module would work like it currently does. Finally, some modules could just show a description without any "basic" settings, for example the "Shortcuts" module.

At the bottom of each "module summary" there's a "More settings..." link that'll take you to the actual module. You can also click on the module name/icon or use the sidebar. I'm not very happy with the "More settings..." widget at the moment (it looks like a link, which isn't used much in desktop applications); hopefully someone else can come up with something better for it!

To summarize: each top-level category (Appearance, Workspace, etc.) has an "Overview" page. Each module in a category is shown on this page, with its icon, name, and a short description. Optionally, a module can choose to show some common/basic settings on this page as well.

Benefits

A new user can read about each module on the Overview page. If someone feels unsure about computers, they can simply navigate using the top menu and change the settings they see on the Overview page.

The settings on the Overview page also give users some context regarding what they can expect to find in that module. If they change the theme and find that they want to customize it further, they can simply click on "More Settings...".

"Advanced" users are not affected much, they can just navigate around and get access to all options like before. At most it'll be an extra click, in case they wanted to go to the first module in a top-level category. That's the only difference. On the other hand, they can also benefit from the Overview since you can quickly change common settings here, for example when playing around with different themes, or enabling/disabling compositing etc.

That's the basic idea, I'm sure there's much room for improvements. As an example, I've been thinking about separating "Overview" from the other items in the sidebar, such as putting the modules under a title that reads "Fine-tuning" or something similar. Anyway. Now I'm interested in hearing what you think!


Problem solved? Please click on "Accept this answer" below the post with the best answer to mark your topic as solved.

Image
10 things you might want to do in KDE | Open menu with Super key | Mouse shortcuts
User avatar colomar
Registered Member
Posts
912
Karma
1
OS
Actually, the fact that "Themes" is selected immediately when selecting the "Appearance" category wasn't supposed to be the standard behavior. That "Themes" KCM was an idea for a KCM where you can select "megathemes" which affect all visual aspects at once, and the other KCMs in that section are just to fine-tune certain aspects. That's why this made sense here.
In other categories where there is no "master" KCM, it would definitely not make sense to just show the first KCM.

So yes, for other categories, an overview page (consistently with the start page showing an overview over the categories) makes a lot of sense!
User avatar EraX
Registered Member
Posts
70
Karma
0
OS

Re: [Design Project] System Settings

Mon Jul 07, 2014 11:12 am
I've been watching a Deepin review lately and they have an interesting approach to the system settings.
http://youtu.be/S56nKdY4EpA?t=4m31s
It is interesting because it feels like a part of the desktop, its easy accessible and doesn't hinder your work.
If i remember correctly it have been mentioned few times that some settings should be hidden as advanced. Why not making something similar to the deepin sidebar with basic, most common settings. If the category has more advanced settings there would be a button sending the user to the "Full" system settings window. And the layout of the last mockups could be easily modified to work as a sidebar version and a full version of the settings. In addition it would fit pretty good in in the plasma active.
User avatar colomar
Registered Member
Posts
912
Karma
1
OS
While the Deepin System Settings look really sleek and we could certainly take inspiration from how many of their settings modules are done, I honestly don't see the the advantage of having System Settings in a sidebar.
Sidebars are great for displaying additional controls without covering the main workspace. That's why we use sidebars (or drawers, as we call them) for example for setting filters in Plasma Active's Files application. However, when you change a setting, it's usually your main task for that moment. When do you need to see a different application while changing settings? The only case where I see an advantage is when changing a setting which immediately affects an application (such as changing the application appearance), but that's only a tiny fraction of the settings.
Therefore, it's a restriction of the available space for the settings for which I see no clear reason.

Being able to turn System Settings into "Sidebar mode" for those situations where it makes sense could be worth considering if it's not too much effort.
User avatar andreas_k
Registered Member
Posts
421
Karma
0
Hi, I start a small research at the plasma 5 system setting modules. all the informations are at https://share.kde.org/index.php/apps/fi ... emSettings.

When you look at the system setting modules you will find the following structure:
1. Header
2. Description (if needed)
3. Selection area what you want to use
4. Settings area
5. Preview
6. Import, GHNS, Export
7. Tabs

Nr. 1 and 2 are fixed in size and place. All other items depends on the module. If you look at the modules with tabs it is interesting for what a tab is used for.
1. Tab for different subsections of the module (like Accessibility with tabs for Bell, Modifier Keys, Keyboard Filters and Activation Gestures)
2. Tabs for Configuration of the selected item from the fist page.

I make a first mockup how the structure could be defined for the modules.

1. Header
2. Description (if needed)
3. Selection area
4. Preview area on bottom (or on top below the description)
5. Configuration area. I don't know. with tabs, buttons, above the preview area, ....
6. Import (Drop Down Import, GHNS, File), Export and Help are at the icon bar, because there is space and would work there quite good.
User avatar andreas_k
Registered Member
Posts
421
Karma
0
I'm also thinking about the structure. when you look at the results http://user-prompt.com/kde-system-setti ... avigation/ scrollarea and drill down are 50/50 %.


In the last time a lot of mockups are using the icon view with additional information in the second line. I used this concept and move the subsections into the second line (like windows 7). You can click to the 1. section or the subsection. In the icon bar you have a search and a settings dialogue.

In the subsection you have the 1. section items and the subsections of the selected 1. section (mockup from the previews post above). And for navigation a Breadcrumb. I don't know if it is a good idea to list only the subsection from the selected item or list all subsections, but I think it is a good idea to have all 1. sections because when you want to configure something in the hardware section you have all informations for this topic on one page.
User avatar andreas_k
Registered Member
Posts
421
Karma
0

Re: [Design Project] System Settings

Sun Jan 11, 2015 12:49 am
For the overview I added an side panel (optional).


And for the modules I make a new mockup.

Header, Description and preview on top. I made the preview on top, because this three parts are shown independent from the settings. So the user know I make the settings for the modul, with the preview of the selected setting.
In tabs the Selection part and the Configuration part. I also look at the modules of the existing SystemSettings. There are two possibilities of Configuration grouping:
1. Each configuration section has there own tab
2. The configuration settings are grouped in blocks

To get an better overview the groups are better but than you have all settings on one page. If you make tabs you can separate into the main settings and advanced settings quite easy.

I look at all existing moduls and the style could be used at every modul. Some moduls use portrait previews (emotions, font management). At this few moduls the preview is on the right section.
User avatar Heiko Tietze
Registered Member
Posts
534
Karma
0
OS

Re: [Design Project] System Settings

Sun Jan 11, 2015 12:01 pm
Your proposal looks clean and usable. But didn't we decide to introduce scrolling content instead of a breadcrumb? And as far as I remember a premise was to get rid of tabs.
Anyway, it's a nice what-if experiment.

 
Reply to topic

Bookmarks



Who is online

Registered users: andreas_k, Baidu [Spider], Bing [Bot], cesartellez, Exabot [Bot], Google [Bot], Hans, hideaki, Majestic-12 [Bot], Yahoo [Bot]