Saturday, March 01, 2008

kickoff improvements

So, this one of the topics I was going to screencast about before being hit over the head with the lameness of media in the free software world was progress on the new application launcher interface (ALI, floats like a menu but stings like a bee). While I figure out what's up with recordmydesktop, I figured I'd just blog about it instead. (BTW, hats off to Phonon, jack and the few other projects that are helping us Getting Media Right(tm) for the long run; I know things often get worse before they get better, so we should be getting really good any time now ;)

So, kickoff ... well, a picture is worth a 1000 of words, so they say. (But then if that was true you'd think they'd state that fact in a picture rather than use words and therefore save time and verbage while making their point more clearly. ;)



There's a lot going on in that shot, and here those things are point by point:


  • There's the username, host and branding at the top of the menu. This was contributed by Stephan Binner from the OpenSUSE team and probably looks familiar to most OpenSUSE users. The logo (which is a temporary graphic to be replaced with something less lame ;) is clickable and will take you to a website. All of this is configurable so that our downstreams don't have to do any source code hacking or screwing with icon themes. In fact, in 4.1 Plasma themes will support a logos.svg file that contains various bits of branding in it so that downstreams can provide one file and get their branding sprinkled tastefully around. The defaults will remain KDE themed, of course. The upside of recognizing this behaviour of downstreams and working with it is that we can take it into consideration, do a better job of making it easy and work decently upstream and make it easier for downstreams to work with KDE in this way. If you're a downstream and have some workspace branding thoughts, don't hesitate to contact us on the panel-devel@kde.org mailing list.


  • The grey box in the top right is awaiting artwork, but it works already: when you click and drag you can freely resize the menu. This was also submitted by Binner.


  • No more HUGE BOLD fonts for headings. They are calmer now.


  • The selection indicator is now a rounded rect. It has a gradient to pull the eye gently towards the text (the meaninful bit), while tying the icon and other bits associated with the text together. It doesn't get in the way of the icon or other graphical accoutrement that may appear. The icon of the selected item also grows. There was long discussion *ahem* about how to do this. I really dug my heels in and refused to budge until we had a solution that wasn't a compromise one way or the other and once people got over the fact that I wasn't going to be cool with a quick "fix" that simply introduced other problems, we really started getting somewhere. The result was a real team effort. I think we're getting there with this new graphical treatment, though I'm sure there's more to go even yet.


  • The current tab is blended with the content visually for better visual association. The cute little animation of the icon raising is still there of course. =)


  • Sub-texts (the little grey bits under the main text in an entry) are still shown on mouse hover only ... with two exceptions: If there are multiple items in the category with the same name we now paint the subtext always; this way if you have 2 "Terminal" applications, you can tell at a glance which is which without mousing over them. The other exception is for lists such as the Recent Documents list where you always want the subtext to see the full path of the document in question. This approach preserves the clean look of minimal text on screen at once while painting that extra text when it is actually of immediate need.


  • You can't see this one in the screenshot, but it paints properly when reverse now so those using the desktop with a RTL language can be happier.


  • Something else you can't see in the screenshot is the headers on the Applications page are now in breadcrumb style on one line using the same font style as all other headings. Eventually I want to make these clickable for really fast navigation.


  • You can right click to swap between Kickoff and the traditional menu now; they are still separate plasmoids but this just makes it easier to swap between them. Neat.


  • Lots of pixel twiddling has gone on: better spacing; consistent sizes of items in the lists, even on the applications page; text and icons never touch anymore; all left/right edges of items line up at all times; small indentation before the subtext. It's been fun as numerous people have piled on and fixed these little things. People paying attention to pixels like that excites me. You might think I'm easily excited, but it's the pixels that make the differences.



There is more to do: making the breadcrumb trail clickable on the apps page, changing the position of the tabs depend on where on the screen the menu appears (Will Stephenson has a patch drafted to do this; it's almost there), hooking up the search with Runners, showing the menu right on the desktop when kickoff is placed there (possible now that we have WoC), etc. But it's already approaching something that I think people will like a lot more, i think.

And yes, there are other options available that you can replace this particular ALI with. That's what plasma is all about after all.

33 comments:

Hans said...

>> There's the username, host and branding at the top of the menu.

Thanks for putting it at the top. I don't really think it's necessary, but being where it currently is it won't disturb me either.

>> The selection indicator is now a rounded rect.

Unfortunately I'm not a fan of the new selection indicator. I saw the discussion on panel-dev, however I haven't read much - I'll do that before complaining. ;)

>> The current tab is blended with the content visually for better visual association.

Looks nice. However, is it style-aware? (Can I change the style?)

>> breadcrumb

Hopefully that'll make navigation easier. I'm one of those "Navigation in Kickoff is a pain / I prefer traditional Kmenu" persons, but it's getting better the more I use Kickoff.

>> You can right click to swap between Kickoff and the traditional menu now; they are still separate plasmoids but this just makes it easier to swap between them.

Woah! This alone is worth a blog post. What's next? The ability to remove the toolbox? ;)

Seriously though, I like this feature. Is it only for Kickoff/Kmenu, or can I add it any plasmoid? (Not sure why anyone would, but still).

Aaron J. Seigo said...

@hans: "I don't really think it's necessary, but being where it currently is it won't disturb me either."

the "do not disturb" principle is why i moved it to the top, actually. glad it works =)

"is it style-aware?"

unfortunately, styles do not provide exactly what we need here. tabs from tab widgets come close, but not quite.

"Hopefully that'll make navigation easier. I'm one of those "Navigation in Kickoff is a pain"

yeah, i'm of the same opinion. i dislike the old menu more, however. my personal goal is to get kickoff to the point where it doesn't quite piss me off when using it ... we're a lot closer and inching every closer.

"This alone is worth a blog post. What's next? The ability to remove the toolbox?"

you know, there's this idea that plasma is there to restrict you. it's not. quite the opposite. but doing that *properly* without screwing things up in the long run really takes time, thought and care. i am not going to rush methods of doing things out the door until we know that it won't have negative effects later on.

some people have taken that caution as a "screw you, user!" attitude. it's really painful to watch since that's the opposite of my intentions. i believe in the method strongly enough to stick with it, but it would be just great if we could past this stupid idea that "oh no! plasma doesn't let me do things!"

it's at version 0.0.1 in kde 4.0.2 for &#!* sake, and we're working on 0.1 for 4.1. zero point bloody one.

as for the toolbox, people really don't know what it's for. so they say "remove it". i say "wait, we're using it more and you'll see the point of it. i'd also like to fix interaction issues with it in the meantime." but people just stick with "remove it." i understand why, though i think it's really shorsighted.

now, this is stressful for me to just ignore people like that because of how i'm built inside and it makes me rather ornery at times, but seriously .. if i listened we'd have kicker and kdesktop from kde3 from here until kde5 (and probably beyond).

the iterative model does work as with kickoff you can switch between menu types, it is looking better and working better ... i just wish it was a little less stressful on me in the process. yes, i'm being selfish there. =)

part of the problem is that we are not being granted the latitude to developing something new. rather we are expected to have something exactly like what was there that matured over 7 years of development. in word: unrealistic. in another: innovation-squashing.

"can I add it any plasmoid"

not currently. but there's no reason we couldn't offer to replace it with any plasmoid that is in the application launcher category. that would let you swap it out for lancelot, for instance. would be a fairly easy patch, too, most likely.

Anonymous said...

nice...regarding the icons at the bottom: when will they be made of the same size? (for example the "recently used" and "leave" icons height) We also need a coherent 2D "application" icon.

tobami said...

>Sub-texts (the little grey bits >under the main text in an entry)
> are still shown on mouse hover
> only

That's great. It looks cleaner. But I see a problem. In order to have place for two lines of text (main text and sub-texts) the main text is top-aligned with icons. It doesn't look good while the sub-text is not shown (most of the time, for example as in Root, Trash and Music).

I am not sure what the best fix for that would be because vertical-aligning the main-text would mean sub-text would have no place. Letting main-text slide to the top when showing the sub-text could be confusing...

Another thing I spotted is that in the current selected item the icon grows, nearly touching the main-text (Home in your screenshot).

And yes, as you probably can tell by my suggestions I also think that pixel twiddling makes all the difference. It already shows :-)

Eduardo Robles Elvira said...

It's all great, but one small bug I've noticed: the nice X to clear written text in the search bar is missing =)

Dave Taylor said...

I think the old menu was much more manageable and quicker to use. The downside being once one had gone through a set of submenu's navigating back without taking care was impossible as you missed the menu and the whole lot disappeared however navigating from scratch is much quicker than using kickoff to backtrack and for me takes a lot less conscious thought because it is better suited to how the (my) brain works. I'll explain my reasoning (although feel is the perfect indicator but doesn't help fix Kickoff).

Firstly scrolling in Kickoff in almost completely unnecessary as you have a complete screen to work with, when you are using the menu that is the only interactive thing on the screen so take as much space as you like. Infact going into multiple columns is still easier than the multi-step approach of scrolling the looking, scroll the look etc... The reason why this is better is not because it is quicker the first time around (although if you know what icon relates to the programme you are looking for pattern matching works very good but only if you can see what you are looking for) you search for something but my perception (therefore I assume others) is that once I have found an object/menu I can find it again without thought just by spatial location (I know where I left it with almost absolute precision) and this inbuilt tool of the human brain is completely abandoned when having to scroll.

My next problem is with the left and right scrolling and my argument is exactly the same as before. It does not use spacial awareness, a breadcrumb trail will improve this but it still doesn't use the inbuilt function of the brain.

Solution: I want all the nice tabs/icons at the bottom of the menu (which are all displayed on one panel with icons (great for pattern matching)) but I also want to use the old style menu to search for apps. Integrating the two or a hybrid if you prefer is the solution.

Solution 2: If you know the name just use Katapult it's so much faster than any other method and you don't have to type the full name (The alt-f2 launcher in KDE4 is multi-staged (is that a nicer way of saying clunky) in use but is better when there are multiple options of the same name e.g kde3 and kde4 apps together).

jospoortvliet said...

@tobami: I agree with the text line-up issue, but I wonder what the solution would be. Showing the text vertically centered, and animating it moving up and the other text appearing when mousing over? That might look silly if some items have text under them by default, and others don't...

@eduardo: It's a feature, not a but ;-)
The clear text icon appears and disappears with a smooth fade animation automatically, and yes, that's KDE-wide of course.

Hans said...

@ Aaron:

"toolbox"

Thank you for your explanation. I agree with those who say that customization is one of KDE's strong points, and that goes for Plasma as well, so I can see why they want an option to move/remove the toolbox. I want to be able to do that too.
However, I understand your position and think it's best to wait and see what comes. :)

Heck, do you remember when people screamed "Plasma is just vaporware"? Ah, those old days. I look forward to seeing how KDE4 matures further, and how the .0 releases almost feel nostalgic.

"some people have taken that caution as a "screw you, user!" attitude."

KDE4 has, without a doubt, created many conflicts. I don't like some people's attitude, but I don't agree with "If you haven't contributed/paid anything, you should just shut up" either. Constructive criticism is, in my opinion, the way to go.

Everyone is afraid of changes; I'm sure the development of KDE4 will become a very important experience for many persons, myself included.

@ tobami:

I thought about the same thing, but neither could I think of a nice solution.
The "main-text-slide" feels like the natural problem-solver, but I'm not sure i would feel very natural to actually use.
Actually, I don't think it would feel very nice at all. Hm. Maybe I should try to make a Flash or something similar to see how it feels?

@ dave taylor

"Solution"
Ooh, that sounds exactly what I've been wanting to do. (Darn, it sounds like I'm some sort of copy-cat :/).

What do you say? Should we try starting something like that? I'm not a good coder (still trying to learn C++/Qt), but maybe I can do some mockups. I'm sure more people will be interested.

And then, once again, there is this common problem: lack of time. Gah. Maybe the Flash/mockups have to wait...

... Back to Physics.

Dave Taylor said...

@hans: I haven't spent that much time thinking of specifics and my coding skills haven't been used in anger in 8 years! (excluding the odd python Karamba widget). I would like to see/hear your idea though as mine is only the traditional menu tacked on to Kickoff, hey ho email me if you like at the obfuscated address: me_davidandrewtaylor_co_uk

felipe said...

Aaron, what about *visually* integrating Kickoff with the panel? Think about theming...

I agree with you. Kickoff is becoming less ugly and it's almost usable (I just love the "Favorites" tab anyway) could benefit some by mimicking the way plasmoids look, a little.

This applies to the clock as well, did you ever consider this, together with the Oxygen crew?

Aaron J. Seigo said...

@tobami: yeah, the text thing is tricky. we haven't come up with a solution yet that is better than what we have. doesn't mean we won't, or that maybe *you* won't even, but we've tried several things so far. maybe one day inspiration will hit like a thousand bolting arcs.

as for the icon touching the text, yeah, i actually moved the text over further the other day to avoid complete touching. it looks ok in practice now (a screenshot doesn't really do it justice as there is movement involved)

@Eduardo Robles Elvira: the clear button only shows when there is text in the line edit. when there is no text, there is nothing to clear ;)

@Dave Taylor: putting the old menu in the new presentation could be possible; i don't like much the page switcher, but large hierarchical menus suck in general. i'd really like to hold out for a better solution in general for that page.

as for krunner being clunky that's only due to the UI which is still up for replacement. it will never end with a "two + one icon" replacement such as seen in quicksilver (which katapult and gnome-do are copies of) since it also needs to serve as a general command line runner ... but yes, the ui there will improve as well.

@Hans: "Constructive criticism is, in my opinion, the way to go."

i agree. when it appears, i relish in it. when it is absent, i don't.

"Everyone is afraid of changes"

indeed, that's a natural human response. how do we keep fear from preventing needed change, however? in our community, the user base has so prominent a position with their voice that they become a *major* stumbling block for advancement since as a group they simply do not self-moderate.

@felipe: yes, i really don't like the border of the menu, for instance. i dunno, we'll see how it goes in the future.

Anonymous said...

>> The clear text icon appears and disappears with a smooth fade animation automatically, and yes, that's KDE-wide of course.

Clear text icon in Konqueror from KDE3 has very nice feature: when you press middle button it replaces current text with the text from clipboard.
Would be very nice to have it in KDE4.

Christopher Fritz said...

Clear text icon in Konqueror from KDE3 has very nice feature: when you press middle button it replaces current text with the text from clipboard.
Would be very nice to have it in KDE4.


I never knew about this, but just tried it in the Kickoff in Fedora 9's packaged KDE4, and it works exactly as you say it does for KDE3. Now if only something like this has some way of making itself known to me, as I could have been using it for quite some time now! (Unfortunately, I have no ideas on how to go about a method of discovery for this feature.)

Aaron J. Seigo said...

@anonymous: "Would be very nice to have it in KDE4."

it already is. i added that to the clear button in the lineedit months before 4.0 was released. i use that feature myself, in fact =)

Aaron J. Seigo said...

ah, i should also note that this works with all clear buttons, not just the one in konqueror (as it was in kde3) so this is actually an improvement.

Anonymous said...

>> ah, i should also note that this works with all clear buttons, not just the one in konqueror (as it was in kde3) so this is actually an improvement.

This is really good, but IMHO here is a small usability issue.
Once you are accustomed to this feature, you start to use it even if the lineedit is empty and now autohiding of the clear button start to hurt...

Aaron J. Seigo said...

if the edit is empty .. just middle click anywhere in the edit. the replace functionality is only useful when there is text existing to replace.

ziabice said...

All this goodness will be ported to KDE 4.0.0 branch?

Aaron J. Seigo said...

@ziabice: "All this goodness will be ported to KDE 4.0.0 branch?"

doubtful. some might, but even then i'm not sure. 4.1 is coming out in summer, so it's not like it's a huge wait. and this is the point of new releases anyways. if we start end-running the process we'll end up backporting half-baked goods. it also takes more of our time away from developing things further as backporting and then testing does take time/resources.

Lure said...

I really like the new improvements - great team work.

Two comments to new resize feature:

1. Should this completely replace the "Number of visible items" option in Kickoff options? Not sure how free resize should work with this fixed number in options...

2. It looks like resize handle is always in top right corner. This makes it very strange when you have panel placed on top or right size of the screen. I think the handle should move to appropriate corner, depending on placement.

Aaron J. Seigo said...

@Lure: "Should this completely replace the "Number of visible items" option in Kickoff options"

yes.

"It looks like resize handle is always in top right corner."

indeed. we have room for it on either side and it should switch around. i'm waiting on the tab/header switching patch first before doing that since it already introduces all the necessary other logic.

Anonymous said...

while i'm still waiting for raptor, and i hope raptor makes the default in the end, this is a very nice work and also the improvements in lancelot are very nice.

keep up the excellent work :)

reldruH said...

I recently compiled KDE from source and when I saw the new Kickoff menu my first thought was, 'Wow, that's sexy.' I can't wait to see where it goes from here.

momesana said...

I really don't like the buttons at the bottom of the startmenu. They could be way cooler. There should be a smooth animation like the ones found in the menus of mobile phones etc. we sit on processing power of modern cpu's and have all the opportunities that arthur gives us but we don't fully use them. I know talk is cheap, so I provided a little example/Mockup of how something like that could be provided. It took me only a few hours to implement what you see on top of QGraphicsView. The code is very ugly and not reusable but it's not more than a mockup so that's ok. I've put it into a tarball if anyone likes to try it out.
Here is a short ogg video showin it in action: http://www.informatik.uni-bremen.de/~momesana/out.ogv
and here is the example as tarball: http://www.informatik.uni-bremen.de/~momesana/cooltabs.tar.bz2

Anonymous said...

Fullwith selection would look beter IMO.
I know you have litle to do with it! but puting overable butons/tabs on the path the mouse must folow from the launch buton to the menu itselt was not a good idea...

momesana said...
This post has been removed by the author.
momesana said...

@anonymous

>> Fullwith selection would look beter IMO.
I don't know what you refer to as "Fullwi(d)th Selection".

>> puting overable butons/tabs on the path the mouse must folow from the launch buton to the menu itselt was not a good idea...

Buttons/Tabs _only_ get activated after the mouse hovers a certain amount of time on that very item. This way there is no "accidental" activation of a tab if you move your mouse towards the menu quickly enough.
Besides, the current kickoff implementation does it exactly the same way.

John said...

First off, great work on all of this. It's wonderful how quickly things have improved and polished up since the release of 4.0.

Secondly, while I like having the username/host/branding at the top of the menu, I seem to remember that the decision to place the search box at the top of the menu was because user testing showed that to be optimal.
Will the HIG folks be performing more user tests to ensure the new layout doesn't cause any issues?

Iuri Fiedoruk said...

It still looks to much bloated. So many spaces..
Now that I've got a 17" LCD widescreen it does not look so bad, but on my older computer.. well it sucks big time in terms of spacing.
Maybe you could add a "slim" and "extra slim" option for it being used in lower resolutions?
Just imagine this monster running on a EeePC :)

Iuri Fiedoruk said...

Oh yes, I was forgetting: for some reason in ubuntu it does not respect sub-folders in menu.
I like to organize things like Internet->File Transfer.
But nor kmenuedit nor ubuntu menu editor seems to be able to make kickoff show those.

Anyway, on the other parts, great work and much needed improvements :)

emix said...

I don't like so much the "zoom" effect of the selected icon. I prefer only the selection border.

pepe said...

I'm liking the new tabs with the current tab blended with the content.

Perhaps this idea has been already suggested/planned to be implemented...

Could the 'non-current' tabs be given a grey colour to add contrast ;) and further enhance the notion that they are not currently selected?

I think there is a slight contrast in the shades used already but its a bit hard to notice on the screenshots.

I think this makes sense from an aesthetic and usability POV.

Kragil said...

Hello,

you can do screencasts with http://www.unixuser.org/~euske/vnc2swf/
it is really easy.

Hope that helps.