Simplifying Interaction

These days I’m designing in browser instead of Fireworks for a live project — Designing in browser has some solid advantages as it helps you launch quite early instead of hanging there in design revisions. Get a quick mockup together and start coding. Quick design, faster revisions and early deployment.

In Pixoto the main challenge is category dropdowns. The images are organized into categories and respective subcategories. User has to first select category from dropdown-1 and then subcategory from dropdown-2 as shown below.

Pixoto category dropdown - before
Pixoto category dropdown – Before

This was making users click twice and causing 2 page refreshes. I didn’t like that and want to design smarter solution for that. Since second dropdown (Sub-categories) depends upon first one (Category) they should be combined into one. So, I came up with the following simple, easy-to-use dropdown solution.

Pixoto category dropdown - after
Pixoto category dropdown – After

This is what I love the most: Simplifying Interactions, Solving Problems. How about you?


Add your comment

  • # Rohit Arondekar
    says on June 30

    Just a thought but wouldn’t it be nice if “Commercial & Journalism” got the same background on hover so that it is part of the menu and you get quick feedback that you are on the right bread crumb?

  • # rich brill - web developer bristol
    says on June 30

    I would agree that doing web design in the browser is probably faster overall, especially if you’re using Firebug, editing styles and html on the fly in Firefox.

  • # Amrinder
    says on July 03

    @Rohit: Actually this is not a breadcrumb but a filter like other two on right. By default it’ll say something “Select Category and Subcategory to filter following images”…

  • # Lux
    says on July 21

    Nice work. I’ve always had a pet peeve, though, about the two level dropdowns – often, as you move your mouse to the right for dropdown2, you tend to move a bit vertically and as a result, the item above/below what you wanted in dropdown1 is selected. Any thoughts on getting around this?

  • # Amrinder
    says on August 02

    Good point Lux. That can be solved by checking the hover time over the particular item and only displaying the sub-menu based on that rather than popping menu of every item your mouse passed over…