Wednesday, August 23, 2006

sweep, sweep, sweep the ui floor

we all have our pet peeves in user interfaces. one of mine is that damn clear button. you know, the one next to location and search bars in kde:



i really do like the solution seen in safari's location bar, where the clear button is inside the edit. it looks cleaner, it tightly associates the clear button with the edit it's associated with, it doesn't muck with layouts (see the composer in kmail for an example). so i wanted to do something similar for kde.

problem? well, i tend to be a pixel stickler. and something that really annoyed me was that while putting an icon or button in the lineedit is simple, the text would flow underneath the button as you typed. several people didn't even notice it until i pointed it out, but there you have it: i'm a bit anal about these things.

it simply was not doable in qt since there wasn't enough flexibility in qlineedit without resorting to really fugly hacks (like including and using private api from qlineedit). well, qt's new css styled widgets to the rescue! now i can just do:

setStyleSheet(QString(":enabled { padding-right: %1; }").arg(buttonWidth));


where buttonWidth is the width of the clear button and voila ... no more text under the button. this gives us:



this css styling stuff in qt 4.2 is really useful and rather powerful. these are the kinds of things i have been looking forward to being able to do with qt4 that just weren't in the cards for kde as long as we used qt3.

side note: i'm not a fan of that "x in a black arrow/block" icon, but it's what we have in svn right now. hopefully oxygen will give us something a bit more elegant.

these kinds of changes are really sweet in my opinion, but our apps are already pretty good. i mentioned kmail earlier; well, so did an old high school friend via instant messenger today:



oooooooh yeah. ;)

26 comments:

Anonymous said...

Really nice! May I suggest to place the "inline-button" on the right side rather on the left side...

Engough rants - really nice solution, more integrated into the url-bar

Anonymous said...

umm so how about that plasma update that was promised?

Mircea said...

... and a global-settable-all-KDE-applications shortcut for clearing text inside the Line Edit would be nice...

thanks for implementing this

Aaron J. Seigo said...

@anonyous 1: 'May I suggest to place the "inline-button" on the right side'

agreed; if you notice in the screenshot it is on the right side. and that's where it'll stay =)

@anonymous 2: 'so how about that plasma update that was promised'

christ almighty. i'm just sitting down to lunch. so far today i've filled out forms on behalf of the e.V. for Intel, checked into a flight booking problem for an aKademy attendee, worked on the inline search arrow ...

after lunch, next up is data engines in plasma. but i suppose that it isn't all fast enough for you is it? nope. gotta keep bugging me about it.

there are few things that annoy me more than someone asking me about something every few minutes. so really, stop. i'm at my tether's end with this. i work on my schedule, not yours. back off and enjoy things as they come.

@mircea: "global-settable-all-KDE-applications shortcut for clearing text inside the Line Edit"

well, we have Ctrl-U which works everywhere. i don't know if having these icons in every line edit would be a Good Thing or not. it would be trivial to add but i'm hesitant to add more code paths in base libs for things that won't be used all that much ...

Anonymous said...

The whole clear button is pointless.

If you want to write something into that field, you'll be using your keyboard anyway. Why click somewhere to clear the input field?

Instead we should standardize on a key combination to clear the input field, like Ctrl+U attributed to Emacs.

This is even more pointless than having "copy" and "paste" menu entries.

Volker Löchte said...

Hello Aaron, what do you think about only showing the clear button when there is text inside the line edit? This way the ui looks cleaner and the button really should not be needed if the line is already empty ;) .

Anonymous said...

"christ almighty. i'm just sitting down to lunch. so far today i've filled out forms on behalf of the e.V. for Intel, checked into a flight booking problem for an aKademy attendee, worked on the inline search arrow ...

after lunch, next up is data engines in plasma. but i suppose that it isn't all fast enough for you is it? nope. gotta keep bugging me about it.

there are few things that annoy me more than someone asking me about something every few minutes. so really, stop. i'm at my tether's end with this. i work on my schedule, not yours. back off and enjoy things as they come."

uh, a simple "I'll do it later" would suffice.

Anonymous said...

Anonymous: well, I usually click the clear button _before_ I put my two hands on the keyboard. This way, I get exactly what I want: the line cleared, and the cursor on the lineEdit widget.

Anonymous said...

Thanks aaron,
enjoy your lunch, and dont stresss about us winers.

Anonymous is a dick nuts anyway.

Diederik said...

> If you want to write something
> into that field, you'll be using
> your keyboard anyway. Why click
> somewhere to clear the input field?

> Instead we should standardize on
> a key combination to clear the
> input field, like Ctrl+U attributed to Emacs.

That's the 'hacker inside' telling you. Now ask a average person how to reset a search field. Telling they need to "search for an empty string" isn't helping here. That's where the clear button jumps in.

Anonymous said...

"Anonymous is a dick nuts anyway."

I asked a simple question and instead of a simple answer I get dissertation on heavy schedules, lunch and possibly christianity. I get that you have shit to do, thats fine. All I did was ask...once, don't act like i've been emailing you, iming you, calling you daily on the status of a project i've only been mildly interested in. The reason I asked is cause there are very few details plasma, thats it.

mahoutsukai said...

I don't think your new line edit should be used in KMail's composer because unlike in the other use cases in KMail the Clear button doesn't clear the line edit but it deletes the line edit and the combo box next to it. The clear button inside the line edit IMO indicates that pressing it only affects the contents of the line edit, but not the line edit itself or even other widgets.

Anonymous said...

The clear button is very handy when you want to copy something using the middle mouse button.

However IMHO using it on all the input field is a bit too much.

Anonymous said...

This should be added to the new KDE HIG.

Selene said...

Mmm, just an idea that popped up when I read the "clear icon will be shown on the right side": would this change for people with right-to-left scripts? I guess the padding-right trick doesn't work for that...

Aaron J. Seigo said...

@selene: "would this change for people with right-to-left scripts"

yes, it fully supports RTL. i made sure of that before even showing anyone the patch =)

@mahoutsukai: "because unlike in the other use cases in KMail the Clear button doesn't clear the line edit but it deletes the line edit and the combo box next to it."

the button that is there now doesn't really denote that it removes the line edit either. but it does, and it actually seems to work decently for people. there's always at least one editable line open, so ...

@volker: "what do you think about only showing the clear button when there is text inside the line edit?"

that's possible. not sure i like the idea of a ui that changes when you type at it like that, though. *shrug* could always try it out...

@anonymous: "I asked a simple question and instead of a simple answer I get dissertation"

let me share what my experience is on this: several times a day i have someone asking me about this or that which i am working on. they are just curious, but the incessant questioning gets rapidly tiring. the alternative of just shutting off and not interacting with anyone is not particularly inviting either.

i find people interacting with the topic de jour to be stimulating, such as all the ideas and questions about the clear button in these talkbacks.

random, off-topic "are you done yet"s are less stimulating and more annoying. if it was once a week: no problem; once a day: annoying; more than once a day: demotivating.

so when i say "look, back off" i'm talking to everyone who's doing this, not just you in specific. it seems most don't stop and think that they aren't individuals that i have 1:1 time for but part of a (every growing) large group of people.

be conservative in what you send; i'm trying to be as liberal with what i receive as i can.

Rudd-O said...

Wouldn't it be easier and more reusable to create a new widget based on KLineEdit that allowed implementors to embed other controls a la clear button? There are tons of apps who could be using this (I'm thinking Amarok). KClearableLineEdit. Damn, that sounds good

spart said...

Those widgets within widgets are difficult to use when (as is the case here) they blur the line between informative and performative controls.

Think about using this control in konqueror's location bar.
Why would you want to interact with the arrow on the right side when the symetrical image is just an informative,stupid favicon. What's the difference?

More broadly: the whole "hollow" frame of a text control is there mostly to seal a pact with the user: "Here be only information".

Mixing action and information without strong visual separation is breaking an important UI paradigm, and that's up to no good.

An other example of this, though less extreme, is the progress-bar-that-is-also-a-selection-marker in Apple Safari's location bar.

It's utterly confusing, because you never know if it's informing you about the system's state, or about *your* interaction with the system.

vladc6 said...

100% agree! Thanks for bringing up this issue.

For the longest time, I never even realized what that X-in-the-bullet button was for! Putting in the search field is a whole lot more intuitive.

Anonymous said...

Very nice. This is the sort of thing that will help KDE become more polished, not the fustercluck that is the redone open/new dialog in koffice.

OT, does flustercuck or fustercluck make a better spoonerism?

Mircea said...

Hmm.. I wasn't aware that Ctrl+U clears the line edit. I couldn't even find the shortcut in Control Center Keyboard Shortcuts.

Anyhow, now that I think of it, I only use the clear button to clear the Filter line edit widgets. For others, such as the location bar, I simply select everything and type over. At least that's how I'm doing.

Looking at the Location bar better, it seems clicking the clear button is more efficient, since it clears everything AND places the cursor in there, with a lot less movement.

BUT, there is a glitch. The Location Bar is not a line edit widget, it's a dropdown list. I'm not sure but maybe the dropdown button and the clear button would clutter a bit the area on the right.

Florian Grässle said...

Uhm, Safari doesn't have such a clear button inside its location bar... Its the search/filter lines throughout OSX that feature one.

Actually it's going to be rather difficult to incorporate the inline clear button into any browser's location bar. The far right side of today's browser location bars is the realm of the security lock and RSS icons. Both in combination already make the bar difficult to handle.

So while I really welcome the inline clear button for especially search/filter lines I don't think it's going to make it into konqueror.

Aaron J. Seigo said...

@spart: "Why would you want to interact with the arrow on the right side when the symetrical image is just an informative,stupid favicon."

because you'll get to know the button from other places, e.g. earch lines.

"Mixing action and information without strong visual separation is breaking an important UI paradigm, and that's up to no good."

as opposed to now where there is no clear connection between the button and what it operates on? where most people have no clue what it does? when the same buttons in macOS are working just wonderfully?

there's a lot of theory in the usability field that is bunk; the usability industry has a lot to offer but it also needs to keep a scientific viewpoint on the state and nature of theories they espouse such as "practicality matters" and "reality trumps"

@Florian: " The far right side of today's browser location bars is the realm of the security lock and RSS icons. Both in combination already make the bar difficult to handle."

those are the wrong places for such icons IMHO. we're (or rather george) are going to be implementing the same thing as IE7 here for consistency. that was the point of meeting with the IE team, mozilla and opera this past year.

http://blogs.msdn.com/ie/archive/2005/11/21/495507.aspx

"So while I really welcome the inline clear button for especially search/filter lines I don't think it's going to make it into konqueror."

watch me. ;)

Anonymous said...

I like the idea, I' am user of kde and only reading this blog i understand what is the purpose of this strange button with an x and black background. I really thing kde needs another icon for this (maybe a red x, i doný know).

parquet floor said...

The undeniable beauty of parquet flooring is financially out of reach for many people. A cost comparison between replacing the old worn out wall to wall carpeting and installing parquet flooring will show that the parquet choice is less expensive if you install it yourself.

If you don't have sub flooring which can be sanded and varnished, you might consider do it yourself parquet flooring. Eight or twelve inch squares of finished oak are available in several shades of stain from dark walnut like oak to pale natural tones. The wood grain is preserved in all finishes and the final clear coat will stand up to most traffic.

Henry said...

@aaron
Thanks for your hard work. I wish I could work on KDE also, but I don't have what it takes.

@anonymous 1:
I agree with a previous poster about the clear button being necessary when doing "middle-mouse-click" pasting. Example: You select a URL from the konsole, you go to your browser, double-click and backspace to clear it....now when you middle click you get what you just cleared.

@anonymous 2
"Instead we should standardize on a key combination to clear the input field, like Ctrl+U attributed to Emacs. This is even more pointless than having "copy" and "paste" menu entries."

This is the geek in you speaking. I watch my wife use the computer, and she always goes to the Edit Menu to select copy and paste...her hands are always on the mouse, not the keyboard. I love key bindings, but, Emacs should not be used as an example for anything normal humans use.