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

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

New design prototype

My New Design Prototype

Your Design Examples:

Related articles:

  1. UI Design Patterns: Exploration of Data and Visual Imagery in Application Design
  2. How Can I Speed up Proto-typing & Visual Design Mocks with Hybrid Design Proto-typing?
  3. UI Design Dissection: Google Reader What Makes an Application Great?
  4. Features In The Front Usability Get To The Back
  5. Which Widget is the Right Widget for My Application Design?

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

  1. 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

Leave a Reply

comments-bottom

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
SXSW Interactive 2008 – I Have Arrived Now On To The First Panel & Registration I’m here and I’m so excited. I plan to keep track of several ideas, notes, and anything else I can sponge up in the way of information. So if you are coming to this via some other sxsw blog welcome!... Mar 8th, 2008 | no responses
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

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.

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.