Reply to topic

[idea] Removing unecessary lines to increase visual clarity

User avatar Kubuntiac
Registered Member
Posts
786
Karma
2
OS
Hi all,

I'm so happy to see something like the visual design group come into being. I've been banging my head trying to explain basic visual concepts to dev's for years now, so hopefully this can become a resource where they can be pointed to to actually see what designers are talking about and the reasons for basic design rules.

Anyway, one issue that I've seen pop up again and again in KDE app design is the excessive (imo) use of lines and borders that don't convey any necessary information to the user, or are used in places where there are more elegant or consistent methods available. I love the look of the new mockups on Notmart's blog, such as:

Image

Much cleaner and more focused. I thought though that we could make it cleaner again, by removing the bars above the system tray labels (especially the ones on the inactive windows) and replace it with shading, and possibly a glow instead, to make it more consistent with the rest of the plasma style. Here's my attempt at a mockup. It would look better if there wasn't also a shadow behind the glow, but it's just a quick mockup:

Image

You'll notice, I also added a subtle divider inbetween inactive windows, similar to the new Firefox Arorae theme, to delineate more clearly between inactive windows.

Thanks for the great work you all have contributed so far. Plasma Next is going to be gorgeous! ;D


Krita - All the cool kids are painting with it!
User avatar donK23
Registered Member
Posts
23
Karma
0
OS
Comparing the two mockups - both are awesome in my point of view. I´d prefer the second one by Kubuntiac, because it focuses more on the active window. And its easier to distinguish different labels due to the seperators. Nevertheless the bar in the first mockup looks very stylish. So for me, a combination would be perfect - although not sure, if that would be an overload of visual cues?
User avatar jensreuterberg
Registered Member
Posts
598
Karma
3
OS
Well the bar thing. Ok so I had a comment on the wheeldesign blog (the VDG blog) about those things and one guy, Juan Pablo Firrincieli, gave the awesome idea of squeezing in progress bars in the little lines.

This I thought was genius (we just had the lines because it looked good) and we're all kinda riffing off that idea now trying out ideas for how this could work in practice - so that's another reason why the bars are where they are (although they might be thinner, they might also skootch up a tad) because that means they can double up as something else even when the window is unfocused.

That is not to say that your idea, Kubuntiac, is bad or not cool or something - rather the contrary! Then came the other bit - what is a button? On the one hand its a physical representation of something real (an actual button) and on the other it's an object a symbol for an available action.

To use an example - here in Sweden a few years back they changed the button-boxes for zebra crossings into a new design. The company that made them (the cheapest one) was, as it turned out rather weird and the reason why they where so cheap was because they where religious and thought of it as some kind of missionary thing.



So the button shape at the top is what everyone taps when they want to cross. It looks like a button and its shaped like one so it's the one they go for - BUT the whole front plate is one big button (the idea with the images is some kind of "only through god (the button shape) can man get to something or other" ... don't ask) meaning you can press any old bit of it.
The Task manager is like one huge button. People tend to go for the text though and as long as they can "miss the text" and still click, its fine - they still aim for the text, not the button visual bit of it.

So with that in mind we thought - why not try to unclutter everything by removing the button visuals? Hence the lack of dividers.

That said though - its only IRL that we can get a good feel for how it works - and nothing is set in stone. The point of this slow release and bit-by-bit method is so everything can get PROPERLY tested (not just a test phase but a whole "lets all play with it for a week and see how we feel" and then trying to gauge the ideas that come out of that).

So I'm not saying "This is what we're going with, period" - instead "Awesome idea, lets hold on to it when we get a chance to test the layout so far" if that's an ok answer :)


KDE Visual Design Group - "Sexy by default - Powerful through cooperation"
User avatar EraX
Registered Member
Posts
70
Karma
0
OS
It all comes down to personal taste... I personally like the idea with those lines, you could play with the font colors to make the active tab more visible or adding a text shadow/glow to the active tab text. Saying that creating a plasma theme is rather easy so why not keeping both ideas and making two slightly different themes for the users to choose?
User avatar jensreuterberg
Registered Member
Posts
598
Karma
3
OS
The idea is that it will be down to the user (of course - no doubt about that bit) - its just for NOW we're trying to focus on getting the Alpha out and about :)

But hopefully (my personal hope) is that this community will eventually be a Theme spawning machine that can openly and in the spirit of cooperation have some direct influence on the paths of design KDE will take.

Just wanted that said - the future will be awesome! :)


KDE Visual Design Group - "Sexy by default - Powerful through cooperation"
User avatar lazyit
Registered Member
Posts
125
Karma
0
OS
I personally prefer the solution of Marco Martin, because it is stylish and unobtrusive, also a nice touch of color and fun to the theme of the plasma, which is one thing missing.
And please, do not glow on the bar, I hope that god will be removed from oxygen around the windows
User avatar jensreuterberg
Registered Member
Posts
598
Karma
3
OS
Also wanted to have that said the images from Marcos blog isn't mockups. It's screenshots from the VDG's work on the Plasma Theme


KDE Visual Design Group - "Sexy by default - Powerful through cooperation"
molecule-eye
Registered Member
Posts
401
Karma
0
OS
I think something like Firefox's Australis theme for the tab bar does the distinction between active/inactive tabs very well. If this could be carried over to the plasma theme, it would be very nice and clean and less distracting.
User avatar Kubuntiac
Registered Member
Posts
786
Karma
2
OS
Some interesting feedback. To be honest, I see problems with my own design. @Lazyit - I'd rather no glow in plasma, too, but added it to stay consistent, although I'd be careful about adding color just for looks, and to not communicate anything. KDE3 was quite... colorful, and KDE4 looks much better (imo) as a result! I can see, also, that the dividers aren't necessary if you have the bars above to delineate where each apps hit target is bounded.

Ironically, I actually proposed (with mockups and everything) a bar to show progress similar to what jensreuterberg talked about - years ago. At the time it was pre-unity / unity indicators and so it was rejected as being too tricky to implement or something. Thankfully, times have changed. I still like the idea of progress bars in the task bar where there are active actions taking place. I just find that having so many grey bars sitting along the task bar, drawing attention, without signaling anything that requires the users attention to be distracting. Can anyone running the new theme show a screenshot of how things look with those grey bars running the full width of the screen? I have a suspicion that just seeing such a small region, may change the perception of it.

What about if we kept the colored bars showing useful info such as the active window, task progress etc - but just got rid of all the inactive grey bars that don't require any user attention? That still leaves the issue of defining the hit target, but this seems a pretty small issue to deal with imo.

I'd also like to see a way of emphasizing the active window in the task bar a little more, especially to color-blind users.


Krita - All the cool kids are painting with it!
User avatar Kubuntiac
Registered Member
Posts
786
Karma
2
OS
Also, on the topic of cleaning up extraneous lines, what about removing lines like this:
Image

So it looks cleaner, like this:
Image

Or is this already down as a minor to-do? Seems to me that the bottom line doesn't communicate much that the bottom edge of the window doesn't already adequately communicate.


Krita - All the cool kids are painting with it!
User avatar colomar
Registered Member
Posts
944
Karma
2
OS
I agree with respect to the color-blindness problem: Color is an important way to convey information, but it should never be the only one (see http://techbase.kde.org/Projects/Usability/HIG/Color). One could argue that color-blind people could still switch to a different Plasma theme, but I think we should strive for an accessible default theme.
User avatar scummos
Global Moderator
Posts
1153
Karma
7
OS
I like the second suggestion far better. Not having a clear highlight of which window is active is a common disease in many of today's plasma themes. This goes for the pager, too (especially for the pager).


I'm working on the KDevelop IDE.
User avatar jensreuterberg
Registered Member
Posts
598
Karma
3
OS
Kubuntiac: well spotted! :D
Just so you know a large section of the theme is as it says "under construction" so that line was just a straggler from the "days of old" but I'll check it up.

As for the issue of clarity and color-blindness. There have been a few ideas along those lines (one being desaturating and making the non-focused windows less opaque the tricky bit there was that it also made them trickier to see overall).
The tricky bit is with users who have the rare kind of color blindness where you can't see ANY colors at all. For the common color blindness - blue is not a massive issue but red/green. The even trickier part is combining it with a visual feeling of unity - a sensation of a clean slab of symbols instead of raised buttons.

Hopefully any second now the light theme will be "done-kinda" so it can be tested and we can all go into the knitty-gritty for real and see what needs to be done.

We also need to create a dark version of the same theme (using the inverted color scheme) but that is a completely different mess of problems I fear


KDE Visual Design Group - "Sexy by default - Powerful through cooperation"
User avatar Kubuntiac
Registered Member
Posts
786
Karma
2
OS
Can't wait to see both. I really love where the theme is going in general. Me being a detail obsessed, picky so and so, not withstanding. ;) Speaking of which... what's with the grey, vertical bar on the right edge of the window?


Krita - All the cool kids are painting with it!
User avatar jensreuterberg
Registered Member
Posts
598
Karma
3
OS
I think it's the scrollbar (that has a similar handle as the slider in that screenshot). Right now we're also in a "make all lines thinner" phase so there's that too to consider. I think there is a Aurorae window theme, color theme and Qtcurve widget theme to try out just want to check with the guy in charge of them that it's ok for people start using them.

They are NOT the end theme but a sort of "lets test this IRL" themes for Plasma Current...

The issue right now is that we're a large group of people with a background in print design so trying to get to grips with theme files is tricky. I've been thinking of forming a community action crew that get early access to files and mockups that have experience with plasma theme's that can help out. So not saying it will happen, but if anyone has good knowledge of that and can follow design specs and mockups - give a holler.


KDE Visual Design Group - "Sexy by default - Powerful through cooperation"

 
Reply to topic

Bookmarks



Who is online

Registered users: acrux, Baidu [Spider], bassamanator, Bing [Bot], Google [Bot], ipwizard, pareekyashovardhan, samidon, Sogou [Bot], zachalexy