Shop Mobile More Submit  Join Login
×




Details

Submitted on
October 25, 2010
Image Size
196 KB
Resolution
800×900
Link
Thumb
Embed

Stats

Views
12,186 (2 today)
Favourites
39 (who?)
Comments
31
Downloads
125
×
Search Fields by DanRabbit Search Fields by DanRabbit
This is my first attempt at modular design. In this bit I've tried to assess the common functions of a search field and create a nice organized widget that will fit into any application and allow for a simple or expansive feature set.
Add a Comment:
 
:iconsimplygreat:
simplygreat Featured By Owner Jun 15, 2011
This is awesome!
Reply
:icontesseract6:
Tesseract6 Featured By Owner May 13, 2011
What do you think about adding more light to the focused search box? I mean more like Mac OS X - [link]
Reply
:iconxkit:
xkit Featured By Owner Dec 16, 2010  Professional Interface Designer
You should probably stick to plain dropdowns for autocompletion. I do particularly like the inactive state.
Reply
:iconregunirun:
regunirun Featured By Owner Oct 30, 2010
Dan, not only am I a huge fan of both you and your work, but I am a huge fan of Quickly and PyGTK.
Furthermore, I kid you not, but today I was working on a sexy elementary-esque desktop dictionary, and was thinking: "Damn, why doesn't someone make a quidget for this!?"

So I am unimaginably enthused and excited that you have done this, and I am happy and very eager to work with this ASAP, and do any testing if you so need. I think that these sorts of widgets will take Ubuntu to totally new levels; GTK widgets are, I think, THE MOST IMPORTANT aspect in the potential for an app-based software community.

Again, I'm super excited and thankful you have started this project, search in particular, and can't wait to see what you do next.

Keep up the superb work!!
Reply
:icondanrabbit:
DanRabbit Featured By Owner Oct 30, 2010  Professional Interface Designer
Hey, I'm glad you are super excited about it :D I would love to get a really solid set of quickly widgets going. I'm sure if we get something built that it wouldn't be a problem to merge it into the official quickly stuff. Just let me know when you have something and I'll make sure it gets to the right people :)

thanks for the help!
Reply
:iconrocker9455:
rocker9455 Featured By Owner Oct 27, 2010
Wow, That looks pretty fantastic! Is this going to use zeitgesit to search?
I find i can't search for anything with zeitgeist seeing as when I search the majority of what i look for hasn't been looked at...
Anyway, Great mockup, the progress bar is a very good way to provide visual feedback
Keep up the amazing work
Will
Reply
:icondanrabbit:
DanRabbit Featured By Owner Oct 27, 2010  Professional Interface Designer
It's meant to be modular, so it would work with whatever the developer of a particular application tied it in to.
Reply
:iconrocker9455:
rocker9455 Featured By Owner Oct 29, 2010
Well it certainly looks like I missed the point ;)
Reply
:icondanrabbit:
DanRabbit Featured By Owner Oct 29, 2010  Professional Interface Designer
haha no worries ;)
Reply
:iconfeather-tail:
feather-tail Featured By Owner Oct 26, 2010
Very nice, and classy. ^.^ Hm, would you be able to use the scroll wheel to select different search options, instead of having to click twice?
Reply
:icondanrabbit:
DanRabbit Featured By Owner Oct 26, 2010  Professional Interface Designer
oo yea that sounds like a nice function. I guess for that to work the text would have to change as you rotate through the options?
Reply
:iconfeather-tail:
feather-tail Featured By Owner Oct 26, 2010
The text, or whatever it is that indicates what the option is. >.>b Like for the scroll wheel search bar plugin on Firefox, both the grayed-out text and the icon rotate.
Reply
:icondanrabbit:
DanRabbit Featured By Owner Oct 26, 2010  Professional Interface Designer
I think the problem with rotating the icon is, what if the search options are something really abstract like "genres". How should someone show that in a 16px monochrome icon? or what if its something really specific to an application? I'd like to keep the burden of artwork off developer's backs ;)
Reply
:iconfeather-tail:
feather-tail Featured By Owner Oct 26, 2010
Heh, okay. ^.^

Hm, maybe just build the option in but then have it use the default if there isn't an icon set for it? I dunno, just thinking out loud. >.>b Visual feedback is useful sometimes!
Reply
:icondanrabbit:
DanRabbit Featured By Owner Oct 26, 2010  Professional Interface Designer
I think the big problem right now is inconsistency in feature set and behavior across applications. I don't want to ask for something that can't be done with a modular drop-in solution :/
Reply
:iconfeather-tail:
feather-tail Featured By Owner Oct 26, 2010
Ah, okay ... yeah, good luck with that. >.>b
Reply
:iconbtkostner:
Btkostner Featured By Owner Oct 26, 2010
awesome job!

long live the rabbit!
Reply
:iconkshegzyaj:
Kshegzyaj Featured By Owner Oct 26, 2010  Student Interface Designer
Problem is, how can be the search iniated using a mouse ?

When typing the keywords with the keyboard, you just hit 'Enter'. But a computer newbie is not necessarily familiar with this way of using the 'Enter' key. I've seen several people seizing their mouse, in order to click the search button after typing their keywords in the search field.
Also, when copy-pasting - especially because you just have to highlight the word in Ubuntu, without even having to tell the computer to copy, and then click the middle mouse button - people don't want to move their hands to the keyboard.

Here, when clicked, the search icon provides search options, while the other icon clears the text field. Looking at the proximity between the icon and the arrow, I assume they are not sepparated. They should. If they actually are sepparated, they need more space, or else the end-user might get confused.
Reply
:icondanrabbit:
DanRabbit Featured By Owner Oct 26, 2010  Professional Interface Designer
In most cases, user action shouldn't be required to initiate a search (like I explained in the text): Results should be pulled immediately. If that is not possible, Safari solves this in an elegant way by displaying suggestions in a dropdown with the search options at the very bottom of the menu. I will update my mockup accordingly.

Especially for touchscreen devices with an onscreen keyboard, a search button becomes less relevant when the enter/return key actually changes it's label in context.

Separating the search icon and dropdown arrow (Putting two small targets right next to each other) is probably not recommended.
Reply
:iconkshegzyaj:
Kshegzyaj Featured By Owner Oct 27, 2010  Student Interface Designer
That's why I said the space between the search icon and the dropdown menu should be increased. Some programms managed to do so, but indeed, touchscreens wouldn't love it.

I read that part about live results, but didn't really pay attention to it...the search options at the bottom looks fine to me. But the live results made me think about something else.
As I understand, you get results as soon as you type something. There is also auto-completion. What will be searched ? The auto-completed word or the only letters you typed ? And, let's imagine the search can not be instantly done. The progressbar will show up. Would the user have to stop the search in order to complete or even clear the word ?
Reply
:icondanrabbit:
DanRabbit Featured By Owner Oct 27, 2010  Professional Interface Designer
It should search the text that's actually been entered. I imagine searching the autocompleted texted would be really annoying.

Well yea, that just makes sense doesn't it? I would think if you are changing the search that means you're not interested in completing the first one. But the text field doesn't become insensitive, the icon just changes function.
Reply
:iconkshegzyaj:
Kshegzyaj Featured By Owner Oct 28, 2010  Student Interface Designer
Ah, fine!
What would've been annoying was that, since the search was automatic, it could start before the word is completely typed. And then the user would first have to grab his mouse to stop the search, in order to complete the word.
But if the field doesn't become insensitive, there's no such problem. You just go on typing your word, no matter whether a search is in progress or not. :)
Reply
:icondanrabbit:
DanRabbit Featured By Owner Oct 28, 2010  Professional Interface Designer
ah well if the search doesn't provide instant results it shouldn't auto-start. That would be pretty annoying as well. But yes, theoretically you can just keep on typing ;)
Reply
:iconkshegzyaj:
Kshegzyaj Featured By Owner Oct 30, 2010  Student Interface Designer
Problem solved then!
Reply
:iconconorsulli:
conorsulli Featured By Owner Oct 25, 2010
You know your a good designer when you can get somebodies hairs all fussed over a search-box!
Reply
:iconbassultra:
BassUltra Featured By Owner Oct 25, 2010  Hobbyist Interface Designer
If only the search in progress can be done. It looks awesome.
Reply
:icondanrabbit:
DanRabbit Featured By Owner Oct 25, 2010  Professional Interface Designer
It should be possible. We have a ProgressEntry widget that is able to have icons in it and such.
Reply
:iconbassultra:
BassUltra Featured By Owner Oct 26, 2010  Hobbyist Interface Designer
What about the loading gradient?
Reply
:icondanrabbit:
DanRabbit Featured By Owner Oct 26, 2010  Professional Interface Designer
Yep, that's what I mean. It's a *Progress* Entry ;)
Reply
:iconbassultra:
BassUltra Featured By Owner Oct 26, 2010  Hobbyist Interface Designer
Ah, that's great. :D
Reply
:iconand471:
and471 Featured By Owner Oct 26, 2010
Yeah the standard gtk.Entry has all of these functions
Reply
Add a Comment: