Searching for love

Over the holiday weekend I set out to create mockups for the search and search results pages. I realized early on that I didn’t need separate search and search results pages. I could make a lot of logical assumptions that would give the user results immediately, and they could refine the result set from there. So all of my mockups have search criteria and search results on the same page. My first dashboard mockup was really a search page, so I’ve included it again here:

First dashboard mockup

As a result of my first endeavor (and the lessons learned from it) I created my first real mockup of the search page:

First search page mockup

Both this and the last mockups are effectively replicas of okcupid.com with some minor modifications. That’s okay, the intent of these is really to learn about their design pattern — what works, what doesn’t work, what I’d like to do differently. Here’s a couple things I learned on this round:

• More options on fewer components is better than more components with fewer selections. I was thinking that by adding a couple checkboxes and removing a bunch of options from a select box that I would be doing users a favor. But in taking a look at it that’s not the case; it ends up being mentally more complex. It’s easier to read through a bunch of options in one select box than to read through a select box and two checkboxes.
• If you don’t have many users to start with, you can’t be very restrictive with your search criteria. You need to be fairly unrestrictive at first when you have fewer users and restrict it over time for new users as they’ll have more people to select from.

Here’s my second search page mockup:

Second search page mockup

More lessons learned:

• I had a bunch of wasted white space on the left side and in the top center. By moving the navigation into the top center and the search criteria into the left side I used up pretty much all of the white space. And I gained extra space on the right side that I could either use to extend content or place ads. Moving the search criteria also gave me a place to conceptually split up the concept of searching versus sorting.
• I read an article on producing great search results stating that there is basically no additional strain on a user to show 25 or 50 results as opposed to 10, and most users don’t look beyond the first page. If you want the user to see something you should show it on the first page of results. So we’ll show 25 results by default (instead of 10).
• In the US (and possibly elsewhere) there’s a common rule of thumb that you shouldn’t date anyone that is younger than half your age, plus 7. The inverse of n/2-7 is 2n-14, and those make handy results for the default age ranges.

And here’s what I had for my third search page mockup:

Third search page mockup

This mockup was pretty similar to the last mockup which led me to realize that I really liked the design and had found something I was comfortable with. And most of the improvements I had were fairly cosmetic. And after reading an article in TIME I came to realize that “Search” is a horrible name for these pages. You don’t seek/search for people (not on dating sites, anyway). You’re looking to meet people. So the language needs some revision, but that’s what my adorable fiancée-who’s-majoring-in-Communications is for. I build the site, she makes it read good [sic].