I decided to use a website that lots of people use – or at least; a kind of page that people could relate to. So I redesigned Netflix’s search result in an hour – using the Phi spiral.
I made the first design, showing the result of a search for the actor Kevin Spacey.

This is the design:

When user testing the design at FiveSecondTest.com the 15 first test results showed me that the design was spot on. Of course, it would be more credible with a lot more tests, but seeing a clear trend in the first ten results often points out how the next 150 results would look like.

This is the result of the first and second clicks:

As the results show: My colleague’s theory is spot on.

But … when we look closer at the result we see that people are clicking at the face of Kevin Spacey. It that because the people we tested knew that we where looking for him, and that our mind then automatically looks for his eyes?

I made another search result. This time for the search query “horror movies”.

This is the design:

And this is the result:

As we see, the spiral still works – but not as distinct as test number one. But the power of human eyes draws our attention, I guess. So using images as the search results can give us challenges.

Still. Espen Klem’s myth: Confirmed!

Using the phi-spiral as a visual relevancy hierarchy

So, how could the Phi spiral help us?

A search engine list out what it thinks is the most important first. But the list has several issues:

• You could, but should you?
  Just because your template really want you to render a logic list as a visual  list, doesn’t mean you have to do it like that.
• Not representing the information well
  A news article looks like a news article, no matter which version you see: The front page teaser, a short version or the full blown thingy. But a search result almost always looks like just that: A dull list of items.
• Too many items
  Results at the bottom of the list tends to get higher click rates than just above the bottom. I guess this have to do with how people scan web content in F-shaped patterns and that a list of 10 items is too much information for the user to digest.

So, what if we started to use space and position to show relevancy? The Phi spiral, building on the Fibonacci sequence would make a nice search result.

Phi spiral as a search result. We’ll get all sorts of other issues, but I think it’s a good start to getting somewhere better.

You would maybe not be able to show more than 5 result items, but we could put the search box in the middle of the page and then get 6 items.

Looking less like a search result and more like a content filled page.

So, what do you think? Others are using treemaps: Newsmap.jp. Not a very usable implementation, but a nice idea.