UI Design Challenge: Redesign A Filter Widget
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:
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
Area Search OLD WIDGET
Your Design Examples:
Related articles:
- How Can I Speed up Proto-typing & Visual Design Mocks with Hybrid Design Proto-typing?
- UI Design Patterns: Exploration of Data and Visual Imagery in Application Design
- UI Design Dissection: Google Reader What Makes an Application Great?
- UI Design Book Review: “Designing for the Greater Good”
- Features In The Front Usability Get To The Back
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