UI Design Challenge: Redesign A Filter Widget

Posted by uidesigner on Jun 10th, 2009 | 1 comment

So I am bringing back the UI design challenge and wanted to try this a bit different. I want this to be an interactive experience. If you listen to my audio blog posts: http://boo.fm/b29310. I talked about recent research I was conducting to locate a new house.

During the course of this research I used many front-end UI interfaces and house databases. I came across one such search that was extremely tricky to use. Notice the image below and see that I am required to type in a zip code, but then I am presented with a GIGANTIC list of options in a multi-line text box (some 100+).

So here is the challenge to the community. If you want to participate great. For this particular problem your goal is to come up with a new and better design for the interface presented. If you want you can post a comment that goes to your design illustration etc, or you can simply e-mail me and I’ll be posting some of the entries here along with author and web site link.

There are no prizes. This is strictly for education purposes. There are no right or wrong answers. On To the challenge!

The Challenge:

Area Search OLD WIDGET

My Example:

In my example below I took two routes. One allows the users results to be filtered down to a smaller number by choosing the area in a drop down. The other route I added some interactivity with the mouse. Based upon the 2 filters search type, and area a user could click the “LET ME DRAW IT” and would be presented a zoomed map of the region. Then they can simply draw a box around the region of interest. Click search and then a number of different things could happen. A user could see houses pop up on the map, they could see a directory listing to the right. The point of this challenge is to design something different and hopefully better than the original

My New Design Prototype

Your Design Examples:

One Response to “UI Design Challenge: Redesign A Filter Widget”

Rajat says:

October 28, 2009 at 5:47 am

Hi,
One of the best way could be to let them type the areas they are looking into.
The areas the user would look a house in would not be more then 5 or 6.
So scrolling a list which may not be useful for me, the fastest way would be to type the area and provide auto suggest there when user types.

Rajat

More UI Design Guide Articles

UI Design Lessons: Are You Driving Your Application Usability Off A Cliff? If I had a million dollars for every time a client asked me to add more features, or more appropriately stuff and jam more features into an already bulging application, I would have published a book, bought a mansion, and maybe a small island somewhere in the South Pacific. Usability is nothing... Jul 4th, 2008 | one response

Site News: The State of the UI Design Guide Union I’ve been extremely busy working on a new article series, as well as some more work on agile UI articles. Beyond that I have added a few things to the web site. The first was linking my TWITTER account directly to the blog. It provides me another way to quickly provide news, articles, etc... Jun 5th, 2009 | no responses

Why Did My Design Fail Miserably and Other Not Nice Things? So as I was laying here sick in bed and thinking about design stuff. That’s the great thing or a curse about having a design based job. Even while you are sick you can’t always turn off your brain. So unless asleep or staring at the tv you are always thinking. So the concept I was... Mar 28th, 2007 | no responses

UI Design Twitter
About Me

Twitter is a great way to share new and exciting resources with all our viewers. Each day I provide links and commentary on all things UI. You can find UI resources, UI design examples, new techniques, and a lot more by Following @UIDESIGNGUIDE on Twitter.

I'm at Southbound 35 in Dallas, TX http://gowal.la/s/2eCe 2010/03/16
I'm at Outlets at Hillsboro in Hillsboro, TX http://gowal.la/s/56d 2010/03/16
Best kolaches in texas — at Czech Stop http://gowal.la/s/4Zu 2010/03/16
#viznotes - still looking for some more resources on techniques for visual note taking [ as far as drawing, etc...] 2010/03/16
#sxsw stuck on a conference call - not sure I'll get to make it to anything else..... sigh 2010/03/16
#viznotes anyone have any more great book web resources on techniques? 2010/03/15
@flairbuilder look forward to meeting you at book store 2010/03/15
@rweinberg what was the hash tag you mentioned to me at lunch for the panel you attended thanks 2010/03/15

The idea for this design blog first came about two years ago at SXSW Interactive.

Currently UI Design guide is in its fourth redesign. This site takes quite a bit of time to maintain as well as write the content. Just like UI Design this site is a passion that keeps evolving.

Inside, I cover articles on many topics icluding: lessons, prototyping methods, agile UX methods, design reviews, design challenges, application features, and of course design experiences, just to name a few.

With all the blogs out there you may be asking yourself who are you to give advice? That's a fair question. If you have a moment feel free to read about my design history.