The topic of this thread has been prefixed with "[Crunch]" to indicate that this is a refinement exercise, not an open-ended brainstorming exercise about fundamental approaches to the design - that phase of the design effort is now complete. See Jens post regarding this workflow. Help us stay on topic and on task.

As a background, this is the summary of the overall system settings effort so far:

• COMPLETE - Settings module (kcm) grouping
• IN WORK - System Settings design (this thread)
• NOT DONE - Individual kcm designs (not this thread)

The design issues regarding concept and organization have been settled and the general top level navigation and layout is generally settled. The focus of this effort should be the systemsettings application. While some general kcm design considerations are helpful, there are many kcm modules so it is simply impractical to do everything all at once. We can deal with individual detailed kcm design in separate threads (some kcms are unlikely to be redesigned).

From the long running thread with many helpful inputs from the community, andreas_k with Heiko's and ken300's great feedback has produced an excellent reference point for this refinement exercise:




I think these very effectively captures the design issues that have generally been settled on (concept, organization, layout and navigation) as well as providing a fresh yet familiar look and feel! I suggest that we spend about two to three weeks considering any refinements so we can deliver a practical, beautiful systemsettings design in a meaningful timeframe.

Have fun refining away!!!

For me the system settings are separated into two parts
1. navigation with the front page and the navigation panel
2. module settings

1. mockup for navigation

I removed the 2. grouping and show on the main page only the main groups (Appearance, Network, ...) and the moduls where the user can change the settings. the second grouping as we have it now is missing, because the user want to change the settings and dont want to think, in which group the icon settings are located. the mockup is for the standard app size (1024*786) you can show up to 60 modules without a scrollbar. OS X show 32 system setting modules in the main configuration. At a fresh plasma 5 installation there are about 38 modules.
In the mockup I show the module name and if available (or useful) the main configuration, so the user get an great overview on the main page.
On the main frame there is no sidebar, because 50-70 moduls are enough information on one page.

The problem is, that kde has a lot of moduls, so maybe we can merge some moduls into one modul like I wrote here viewtopic.php?f=285&t=121053&p=327491#p327483

2. module settings
On the left side there is a side bar for the navigation. The look and feel is from the main page. All moduls from one section is shown. Why, because when the user will change something from the theme, we can show him, in which other moduls are the other settings.
The left main space is for the modul. This is organized like:
a. Header
b. Description
c. Preview
d. Selection
e. Configuration

At the window decoration example, the user have to select the window decoration. If he like it, the configuration is finished. If the user want to change something from the decoration, the user can click on the configuration button (simple and advanced mode). As the configuration is different, which window decoration the user select, the configuration dialogue pops up, only when he push the button. The second above mockup is for the configuration (the icon bar is from an old mockup) The Header, Description and Preview is shown all the time, above you will see the selection or configuration area.



the svg files are at https://share.kde.org/index.php/apps/fi ... emSettings

IMHumbleO i think that to go from this:

To this:

in one mouse click wouldn't really feel very modern, fresh or polished (I couldn't think of better words) - in effect it would be an overhauled version of the setup we've got now.

Refering to the prototypes on this page - http://user-prompt.com/kde-system-setti ... avigation/ - the navigation in the scrollarea prototype has a few advantages that i think we shouldn't just discard because 'the votes are about 50/50'.

Whether you stick with the whole 'scrollarea' idea or replace the scrollarea itself with the really nice looking content areas from Andreas_k's mockups and just keep the navigation principal is irrellevant IMO, but the navigation from the front screen in the 'scrollarea' design is more modern, polished, less 'jerky' (there's less of a sudden change to the whole application screen when clicking something) and involves less mouse movement & looking around the screen than what's being suggested here, so for me it would be quicker & nicer to use.

For me, although this looks nicely styled, personally it feels cluttered:

Heiko's work to reorganise the modules into more sensible & intuitive groups has worked really well and made the whole thing much easier & more intuitive to navigate round. I can see the disadvantage of having the navigation as in the 'scrollarea' prototype (it would need an extra click to access a particular KCM), but for me that would be more than made up for by the fact that on the front screen you just need to choose between 6 categories (Appearance, Workspace etc on the prototype) then choose from the handful of KCMs in the sidebar that then appears. I'd find that much easier to use than being shown all of the individual KCMs like on the front screen above.

when I feel agree with the observations of Ken300, the reorganization of andreas_k seems excellent and much more consistent now, but it would be better to have fewer entries in the first screen possible and not all modules at the sight, that seems confusing to the eye.
The most important thing I think is to give an impression of simplification in the first screen, and redraw good individual KCM inside, which I think is what you are doing.
Sorry for bad english

I like the idea with the simple start screen as Andy show us.

A comparison of two types.
Left: start page with all moduls in the subtitle of the main section. also recently changed moduls listed. Second page is the modul page for the main group Workspace
Right: Main Page grouping into the main Section and showing the icons of the subsection. As subtitle of the section the moduls are shown. It's still the same system than now, but instead of mousehover and you see the moduls, the moduls are writen into the subtitle of the subsection. The user have a compact view, but come to the settings with one click.
On the second page the sidebar with the navigation. this page fit for both styles.

I just want to remind everyone we already determined the best grouping for the modules.
See this thread and Heiko's blog post here for the final grouping,

That grouping should be respected. Heiko and Thomas did a really excellent job in methodically finding the best grouping and we should be careful not to alter that here. This thread should focus on the design and layout of the systemsettings overview/landing screen and the container (sidebar, header, footer) when a particular group or module is selected. So part of refining the design should include making sure that the design works properly with the already agreed upon module grouping.

Hope this helps!

Oh, and this is kinda cool in how it visually captures elements of Andy's original concept:


There are a few question I have interaction wise, but I'll ask them later. gotta run!

Andreas_k,

I had a brain-freeze & forgot that we've actually got 3 levels of heirachy Of the two mockups you've just posted i'd find the one on the right easier to use.

Say i was looking for the 'Spell check' KCM then with the right hand mockups i'd look at the front page and think 'it's probably under regional settings so i'll look there first' - if i look under regional settings then there's a very short list of only 4 KCMs to scan through (Translations, Formats, Spell check & Date & time, scanning through them would be nice & quick) and i'd see it is indeed in there, click Regional settings & quickly get to it.

With the mockups on the left there's a longer list of KCMs below the circular blue icons, i'd think 'it's probably in personalisation so i'd look at the list under that icon'. There's a longer list of 11 KCMs and i'd find that list a bit slower to scan through to see if it was in there (or knowing me i'd probably miss it). One thing that i do like on the left hand one is the 'Last modified' area though.

Just a thought - on the mockups on the right - when you've clicked on say Application Style under Appearance on the front screen, I think that it might be good if the KCMs that were under Application Style (Window Decorations & Widget Style) were highlighted or made to stand out in some way rather than just appearing mixed in with the list of all of the other KCMs that are in Appearance that are listed in the sidebar.

Edit - i think that the right hand front screen mockup might be better than the left one for discoverability of what KCMs there are too.

1. Heiko and Thomas do a really great job. the new subgroups are much better than the old ones. At the first mockups I start with removing the subgroups and show only the main groups and the modules like most other operation systems do (2 dimension). But plasma/kde is special, because we can change nearly everything and that's one reason why we use kde. so subgroups are useful.

I was thinking some time about the two variants and that's me findings:
Left system setting variant
+ ordinary the user can guess the main group so on the second page the user have an overview of the modules grouped by the subgroups.
- there are a lot of subgroups with only one module, so the list is long but thin in width. This doesn't fit the desktop size (16:10)
- the first page is new. this wouldn't be that big problem, but the second page witch shows the modules grouped by subsections is also new

Right system setting variant
+ the style is nearly the same than now. the only additional feature is that you see (and can click) the modules in the subtitles. In addition to the mouse over preview.
+ the subgrouping is well shown on the main page
+ it is more like the module layout where the user have as much settings as possible in groups and without tabs

Navigation bar at the modules
The sidebar is always the same. In difference to the sidebar now, where you see the modules from the subgroup, I show all modules from one main group. In the sidebar you see a 2-dimension structure. Why, because all subgrups of the main group Appearance have modules where you can change the styling. Now the sidebar have between 0 (no sidebar) and 4 items. For example when you want to change the window decoration you may also want to change the icons and the colors. The modules are all in Appearance but in different subgroups.
When you configure one module it make sense to show all other modules from the main group.

+ for the right system, when you click on the wrong subgroup or wrong module you see all other modules at the second click and can change the module with an additional click.

I prefer the right system.

I do not know whether it is a good idea, but starting from this:
https://dl.dropboxusercontent.com/u/164 ... view-7.png
You may leave the big icons with: Apparence, Workspace, personalization, Network and hardware, eliminating the writing of various modules under them, so move the line "last modified" higher and leave "last modified" if it is not selected no icon, but to pop icons submodules when you click on large icons Blue. For example, if I click once on "Apparence" on the bottom instead of the "Last Modified" I icons appear in all KCM "Apparence" so I can see them, and if I'm interested I double-click on the page and within Apparence later with the modules. What do you think?

Lazyit,

That's not a bad idea - i still prefer this idea for a front screen proposed by Andreas_k earlier:

BUT although i like it, IMHO it IS starting to look a little cluttered. It's just about OK now, but I think that having a Last Modified section is a really good idea & I think adding that to the above layout will make it too cluttered - in a layout like your idea there would be lots of white space to lay everything out properly and make sure it stays uncluttered (or hide the Last Modified section when one of the blue circles is clicked on etc...)

A quick idea - on the bottom left of the content area inside each KCM is the Import & Export buttons:

I'd find it useful if the front SySe screen had Import & Export buttons too so that you could easily backup all your settings and import them back in in one easy step if you needed to reinstall your system for example. I'm not at all sure that would be possible - aren't each of the KCMs totally independant of each other - but it would be a nice feature to have if it was

Last modified
what I was thinking about last modified was:
- Sidebar
pro you have the sidebar also on the front page and on the modules page
pro the sidebar can be hidden by default
con you have an additional element on the main page, so it would be more cluttered. Now it look like you know it with subtitles
- Main Group last modified on top
pro the style is always the same
con more icons and more additional information
- search integration
the last modified modules was part of the search when the user start system settings the focus is in the search feeld. If you don't write something the search results were the last modified moduls.
pro show the focus on search (for up to 70 modules a good thing)
-icon bar
show the last modified module icons in the icon bar.
pro there is space
con looks ugly
-new icon bar
Large menue bar on top like you know it from the media player viewtopic.php?f=285&t=122273&hilit=Music+Player
there you have enoth space for settings, search, last modified, .... but you have to make this style also for the modules there you can show Header, Description, Preview. But when you don't have an preview, .... it could look
but it's an design process, what do you think?

However in all mockup KCM see buttons "Import", "Export" "Configure" but I do not see the button "get new themes from kdelook.org", is something desired or forgetfulness?

Instead of having to squeeze another button for 'Get new themes' or whatever it'll be called on there, could we just add a 'Get a new theme' entry to the list of existing themes to access the 'Get new themes' feature (so in the mockup below just add a Get new themes entry onto the end of the list of 3 themes Breeze, Oxygen & Windows 7)??



I haven't considered how this kind of layout might impact on other places where there's 'Get more ....' buttons and one problem that i can see is that if the 'Get more...' entry is the last one in the list then it will be hidden if there's more than a handful of entries in the list - but doesn't that kind of make sense, you've scrolled to the bottom of the list, not found what you're looking for so the 'Get more...' entry is there?

It would be good if the 'Get more...' entry was visually different to the real entries - maybe having it centered??

Warning: Loooong post ahead! -)

andreas_k wrote:I like the idea with the simple start screen as Andy show us.
A comparison of two types.
Left: start page with all moduls in the subtitle of the main section. also recently changed moduls listed. Second page is the modul page for the main group Workspace
Right: Main Page grouping into the main Section and showing the icons of the subsection. As subtitle of the section the moduls are shown. It's still the same system than now, but instead of mousehover and you see the moduls, the moduls are writen into the subtitle of the subsection. The user have a compact view, but come to the settings with one click.
On the second page the sidebar with the navigation. this page fit for both styles.

Ok, I've finally had a chance to take a detailed look a this. Let's start with the general approach on the left.

I went ahead and tried fleshed out a few more design elements from Andy's conceptual mockups in the Big System SettingsThread using standard controls where possible. One implementation limitation I left in place is that only one kcm can be loaded at a time in system settings, so that rules out the scrollable kcms portion of the design concept from the Big Thread.


I think that come pretty close. Ok, so a few observations:

• As with the conceptual mockups, I think the layout looks quite nice.
• At the Home screen the user has information about the first two levels of the content structure/information hierarchy and can navigate down one level from there. I did up some quick icons there.
• I also changed the small text under the big icons in the Home to show the next level of the content structure rather than the individual modules, otherwise the user would expect to a list of all modules in that top level group which essentially collapses the entire second level of the content structure. We want to keep the module grouping content structure intact.
• Two methods are presented to browse/navigate down from the top level the hierarchy - click the toolbar or click the big icons. It seems redundant.
• I added the recently changed modules section based on a conversation I had with Andy a while ago. The user can directly access a settings module from there.
• Search results would replace everything below the toolbar with matching modules. The user can directly access a settings module from there.
• I did not include the top levels of grouping structure in the sidebar. I seems like it would be yet another way to browse/navigate down from top of the top level - more unnecessary redundancy I think.
• Since loading multiple kcms in a scrollable view is off the table, navigating the lowest level of the grouping hierarchy is done via the side panel.
• Like the current system settings tree view, you end up needing these not-terribly-useful placeholder views when a group is selected in the side panel. This is the best I could come up with (it might be marginally more useful that the current system settings):
  

------------------------------

Ok, on to looking at the approach on the right side. I took Andreas' mockups, left the overview pretty much as is, and made a couple minor modifications to the module view. As before loading multiple kcms at the same time in a scrollable view is excluded:


Some observations:

• Andreas' mockup for the overview is pretty much unchanged. As he noted, this is similar to the current system settings app (with some improvements).
• The overview makes better use of space than the current system settings app (good use of the icon + primary/secondary test pattern to make the information more scannable) without looking cluttered.
• At the overview, the user has information about all three levels of the content structure and can navigate across two levels. The user has information about the first and second level of the hierarchy immediately when the application opens and can get down to the third level in one click. The other approach always requires two clicks. I have to agree with ken that it just seems much it's easier and quicker to navigate, requiring less clicks to get to an actual settings module. (If we could the multiple-kcm scrolling view, it would definitely help reduce the steps to get to a settings module...)
• As with the other approach, I removed the top level from the side panel in the module view to avoid redundant methods of navigating from the top level of the hierarchy. When the user selects a group in the overview, they'll get the contents of the selected group. I think it might be a bit strange for the user to get another representation of the top level of the hierarchy in addition to getting the contents of the selected group. I also added a button to easily return to the overview.
• The side panel also uses the icon + primary/secondary text pattern to include some glanceable information about the current setting in each module entry.
• The side panel in the module view provides navigation of the contents of a selected group with a simple title of the selected group shown above the selection list. This avoids the need for the not-very-useful place-holder group views as mentioned in the other approach.
• As with the other approach, Search replaces the contents below the toolbar with the modules in search results. Clicking a search result takes you directly to that module.

In all, I am compelled to conclude that I think the second approach provides a better basis for a practical design. I am constantly reminded that it is not just about how a UI looks but how well it works as well. Oh, and maybe we could take include the recently changed area from the first approach:

Maybe there are other useful things we can take from the first approach (search always available?, others).

In comparison to the current system settings it's an improved Overview with a better icon+text pattern, better use of typography, the new recently changed area and more information without interaction. And the module section has the improved side panel navigation, again with a icon + text pattern including some information about the current setting in any module listed. All together I think it represents the basis for a significant improvement while being relatively practical to implement.

UPDATED: Better picture links so they show up correctly.