Klassy defaults design decisions (v6.7)

[paulmcauley]

This piece outlines the design decisions made in choosing the Klassy defaults, and highlights why I believe Klassy defaults make a better choice than the current KDE defaults (Breeze).

Window decorations

Icons

The window control icons are the most important icons on the system – they appear on every window, and therefore need to be clear in meaning and clean in appearance.

The following illustrates the main icon sets being discussed here:

The Oxygen/Breeze icons are clean but over-use arrows:

Oxygen/Breeze arrows are particularly confusing for maximize and minimize (which may suggest, incorrectly, that they might move the window up or down). Upon first encountering these many years ago, I got particularly confused between Oxygen's minimize and restore icons. Upon showing KDE Plasma to relatives for the first time, the Breeze window icons also caused similar confusion. Since KDE4 I have been thinking of ways to improve this. The following table illustrates the decision-making process for each default Material icon in Klassy:

Window control button	Chosen icon	Rejected Alternatives
Close	A now-universal icon for close; meaning no, negative, destroy.
Maximize	Represents a large window snapped to the large rectangular shape of the screen.	Does not move the window up, and there are too many ambiguous arrows in the overall UI already. This icon can be confused with full screen icons, and I was trying to reduce the number of arrows. This icon I initially thought showed a clearer intent, but for consistency, it meant I had to add arrows to all icons and made the icon set more cluttered looking.
Float (currently called the ambiguous and sometimes inaccurate name of "restore" in kwin and Microsoft Windows. Windows opened maximized aren't being restored at all)	This icon shows a smaller rectangle than maximize and an arrow pointing bottom-left, indicating a detachment of a smaller window from the snapped maximize state. The arrow can also indicate the possibility of motion in a floating state. Upon first glance, this icon will look familiar to many users accustomed the Microsoft Windows icon, yet does not have the disadvantage of looking like multiple windows or a copy icon.	Initially, I thought this icon was clear in meaning as showed the state of multiple floating windows, however after thinking more, the window does not transform into multiple windows and it is too similar to the copy icon. The Material icon is also cleaner looking. Not clear if this means float or minimize. Arrows like this are probably better for returning from full-screen mode A kite/diamond shape which will not snap congruently into the rectangular shape of the screen. The shape can also be seen as four fused arrows pointing in the cardinal directions, indicating possible "floating" motion: . This was used in a previous Klassy version, however, upon reflection I have decided that this diamond shape is not clear enough in meaning, and could be interpreted incorrectly as a window rotation.
Minimize	A small box indicating the compacted shape of an task in the Icons-Only Task Manager. Alternatively, a window compressed into a horizontal bar, indicating the compacted shape of a task in an Icons-and-Text Task Manager.	I often clicked this accidentally in Oxygen when I meant to click float - it does not move the window down necessarily (e.g. with left-aligned panel), and there are too many arrows in the UI aleady. I liked this because it looked like a sweet, but it is hard to see from a distance and looked busy.
Keep in front (currently incorrectly called "keep above" in kwin; "above" requires an unnecessary mental orthogonal rotation of the 3D reference plane to make sense, especially considering computer displays are overwhelmingly vertical and "top" is used everywhere else to mean above)	This shape comes from a notation used in physics (particularly electromagnetics) for 3D diagrams, whereby a dot indicates an arrow-tip pointing towards the reader, and an x indicates an arrow-tail pointing away from the reader: The circle indicates a selection. A clean-looking icon.	Uses the wrong 3D reference plane; this could imply that it moves the window to the very top of the screen; yet more ambiguous arrows. This is modified from Breeze icons and is also on the wrong 3D plane; it is also visually a bit busy.
Keep behind (currently incorrectly called "keep below" in kwin; the same incorrect 3D reference plane as above)	Same paradigm as used for keep in front. The circle indicating a selection prevents confusion with the close button (you can't select a closed window, and the closing animation does move behind. This control is also rarely useful, as windows kept behind are almost as easy to find as closed windows 😂, with the minimize control being more appropriate in most use-cases).	These two icons are rejected for the same reasons as above.
On All Desktops	A simplified version of the icon used for Virtual Desktops throughout Plasma. Can also be viewed as an inverted plus symbol, indicating the window will be added to all desktops.	These icons do not communicate anything to do with Virtual Desktops; the pinned icon is also too similar to my Keep in front icon, and I think Keep in front is more deserving of an icon that looks pinned.

Buttons

The default button size is designed to have a larger clickable area than the Breeze buttons. Unlike Breeze, the shape indicated by the button on hover approximately indicates the effective clickable area (including Fitt’s Law edges).

Klassy's default button highlight style on hover is designed to match the Breeze "Blue Ocean" design refresh – something that the Breeze window decoration itself was never updated to do.

Borders and outline

When a window button is mouse-hovered, Klassy can highlight the entire window with a matching outline colour – this indicates a transformation to the entire window. This is particularly advantageous for UX when the close button is hovered – this gives a stark indication to the user that a destructive close action will happen to the window if close is clicked:

When the Keep In Front icon is pressed, Klassy will also highlight the in-front window with a window outline in the accent colour.

Application Style

I think the Breeze Application Style was largely good, therefore the Klassy Application style is similar. However, there are some major differences:

Scrollbars

A lot of work went into the design of the Klassy scrollbars – the Klassy scrollbar design is unique on any platform.

The default Klassy scrollbars will show a visually minimal slider when they are not being hovered over by the mouse, and moved using a scrollwheel/two fingers on touchpad. However, when the Klassy scrollbar is hovered over, scroll arrows are present to allow small, precise increments in scrolling to still be made. Unlike on other platforms where this has been attempted before, the slider groove is dynamically adjusted so that there are no gaps whereby the arrow would otherwise appear. Arrows are also completely unnecessary when the scrolling is at a maximum/minimum position.

It is silly that in mainstream GUI design scroll arrows have been sacrificed for the sake of form-over-function excessive minimalism. Scroll arrows are essential for precision, as well as for elderly/disabled people who cannot use touchpad mouse gestures well. I believe Klassy offers the best solution bar-none, on any platform.

Klassy also hides the scrollbar separator by default, removing unnecessary visual noise present in Breeze.

Tabs

Klassy keeps tabs that look like attached tabs, not rectangles or floating rounded rectangles. I believe there should be a future development effort to allow application tabs to be placed in the titlebar by the application (tabs are also titles in MDI applications).

Corner Roundness

Klassy's roundness level of corners on UI elements is dynamically adjusted to match the roundness of the window decoration corner radius (or can be overridden to a custom value). Klassy's default corner radius is 4px – this is the maximum roundness before checkboxes start to look circular.

Consistent application of Window Decoration style to the Application Style and Icon theme

Klassy window decoration icons (if installed properly with Klassy Application Style enabled) match the icons on application docks, tabs and MDI sub-windows:

Klassy (if installed properly with Klassy Icons enabled, and configured "System Icon Generation...") also matches the window control icons used by the system in context menus and GTK window control icons.

Both Aurorae, and the upcoming "Union", seem to have neglected the fact that the window decoration appears throughout many other aspects of the Plasma UI.

Plasma style

Panels

Panels are black in all theme colour variants so that the panel is unobtrusive and allowing the user to focus on the application rather than the desktop environment.

Floating panels are turned off because:

1. Floating panels move and cause an unnecessary animation when moving/maximizing windows – an unnecessary distraction from the user’s task at hand.
2. Panels implement Fitt’s Law screen-edge mouse activation of widgets, yet with a floating panel this is not visually apparent as the panel is now illogically separated from the screen edge.
3. The separation and rounded cornered floating panel is visually more distracting than a panel that blends in with the screen edge.

Klassy global themes offer both vertical left-aligned panels (for 16:9 laptops) or horizontal bottom-aligned panels (for taller aspect ratios or large desktop monitors).

Traditional horizontal bottom-aligned panel

The horizontal bottom-aligned panel has a normal task manager with Icons-and-Text Task Manager enabled by default. Since there is space available, it might as well be used to display an intuitive window label rather than a mere icon. The original design of the Icons-and-Text Task Manager also showed only icons when there is little space (this has since changed for the worse to show lots of "...").

Vertical left-aligned panel

The vertical left-aligned panel width is selected to be wide enough to display two vertical columns of system tray icons, but no wider. To minimize the wideness, the Plasma theme was edited to reduce border size:

The Klassy panel clock also shows the time with the day of the week and day of the month, as most people can remember the year and month but not always the day. This shows more useful information than the Plasma defaults (it shows the weekday), but also avoids information overload (unnecessary month and year). The full date and time can always be obtained by hovering over the clock.

Colours

Klassy Light: designed to be in the spirit of the original Andrew Lake Breeze theme with dark active titlebar and accented titlebar separator). The shades of grey and blue have been tweaked to be more visually appealing to my eye:

Klassy Dark: a similar spirit, but in a dark theme. The dark colours are based on the original Breeze Dark, not the revised darker version (a dark theme does not have to be pure black, rather it just needs to not burn your eye out when your pupils are in a dilated state! I have found the very dark themes hard on the eyes, most likely from poorer contrast):

The titlebar and border colours are chosen to easily distinguish the active window from other windows, as well as distinguish multiple overlapping windows from each other. A dark titlebar and border helps frame the active user content in a non-distracting way.

The titlebar colours and opacities are also the same as the colours and varying opacities of Klassy's panel. This creates a visual effect whereby the content area of an application is framed, particularly nice in a maximized window when using a left-aligned panel.

Over time I have found the accented titlebar separator better than using window outlines to distinguish active from non-active windows (I find accented window outlines slightly distracting). The accent colour on active windows also adds a touch of personalisation and colour.

I do not think the "header colours"/"unified tools area" idea that Windows/MacOS/Breeze/Gnome have introduced is a good idea. Active and inactive windows are harder to distinguish with header colours, and functionality-wise, toolbar controls have nothing to do with the draggable title area.

Fitt's Law corners and edges

The below screenshots show the edges and corners of the screen which can be easily reached by the mouse (these areas are easier to click due to the mouse not being able to move any further at the screen edges, and especially the corners). It is good design to place important functions at the edges and especially corners.

With a left-aligned panel:

With a bottom-aligned panel:

It is important that the scrollbar is easily reached from the screen edge. The "KHamburgerMenu" Application Menu button should also be available from the right edge in many KDE applications, but it seems that Fitt's Law has not been thought about enough, and unfortunately this does not currently work in any KDE application I have tried.

The above examples also show how I would design the most used computer application – the web browser. This is based on a modified Falkon design with tabs in the titlebar (MDI tabs are also titles). There aren't many differences, just titlebar tabs (more compact and easier to switch at a Fitt's edge). The full title is shown in the address bar, without taking up any more space than the existing Falkon toolbar. That there is no current popular Qt web browser only indicates that there is a need for development in KDE to support application tabs in the titlebar (I would use Falkon if it only had this single additional feature).

Future enhancements that should be made in the Plasma title should be restricted to tabs in the titlebar and drop-down menus in the title - these both give Fitt's edge advantages. These two are important, but all that is needed. The approach used by GTK/Gnome CSDs (and previous over-complicated Plasma "dynamic window decorations" ideas) whereby absolutely any widget can be beside the title only creates confusing and inconsistent UIs. KDE 4 also over-complicated tabs in the titlebar by letting you merge tabs from multiple applications/instnaces in one window - it should just be from that application instance.

Conclusion

Klassy defaults should make a great default! I am open for work.