Searching for love 2

About a month and a half ago I created mockups for the search results page. The version I ended up using had a filtering panel on the left side, ads on the right side, and rows of search results in the middle. I laid it out and after looking at it for days on end while building out more and more of it I started to wonder if it was really the right approach. The inner Maximizer in me just can’t let things go; I’m constantly trying to go from good to great. Which, let me tell you, is a dangerous habit when you want to launch something (and it drives Rachel absolutely nuts). Thankfully with Balsamiq Mockups I can try out new ideas without investing in any coding time. I use it when I have enough time to be productive but not enough to get into “the zone” and program.

So with my fourth search page mockup I set out to try something a bit different and I came up with panels or “cards” for each person. The same information as before, just rearranged a bit. And I also replaced the stars with “I like them”/”I don’t like them” buttons because that seemed a bit more intuitive (how do you rate person on a 5-point scale?).

Fourth search page mockup

While I was in the process of drawing up these mockups I ran across a page on Google which shows a heatmap for the best locations to place ads. Ads on the top right side have weak performance and ads on the bottom right side have (apparently) no performance. With that in mind I decided to ax the ads on the right side to free up some space there and instead place ads intermixed with the search results. I’m still not sure that’s the best idea or the best location, but it seems better than wasting a bunch of space on the right side.

Fifth search page mockup

Further reading about the usage of dating sites led me to realize that the majority of people place a lot of importance on photos (as superficial as that may seem). I thought about various ways to make people’s photos take up the majority of the space rather than a bunch of text, and I think I was successful with this mockup. Something about layout out results in columns and rows freaks me out a little though. And I can’t quite figure out why because reading left to right and row after row is how we read text (in most languages, anyway).

Sixth search page mockup

Finally I decided to return back to the row layout and see what would change if I added some space on the right by removing ads. I also took out the “profile” and “message” links because a) profile seemed worthless when you could just click on their name/photo and b) message seemed a little premature if you hadn’t looked at their full profile yet. With these few changes I was able to add a lot more space for the description text… and not much else. It is a better layout, just not by much.

Seventh search page mockup

What did I learn from all of this?

• Photos are king, and should take up the most space
• The row based layout isn’t an ideal format for showing profiles
• I can kill the profile/message links without any (foreseeable) adverse effects
• The ads on the right side need to go

Some good learning going on there. Not a bad investment of time at all.