Trivago's compare hotels module UX improvement

I believe that every solution has several paths. I’m the one called tab master. Always opening too many of them so I can nd a solution and more options to compare. I believe I’m not one of the kind.

Opening the Trivago website, the first thing I checked was user experience for the desired destination of choosing the right hotel for me.

When your desired destination is a big city you will always and several hotels that you want to compare. Trivago's website has that option. I had struggled a little until I found it. It was a heart icon that was over images. At first glance, I was not sure if this was correct. The heart sign clearly indicates “like” or “share”. So I will pop up in some kind of share form or it will really add it to compare list. At the first click, I saw the hotel in the right sidebar and I was relieved.

“ Never give users a false hope. “

Quick solution.

Stop me at number 4. Isn’t much easier to just say: Hey man, you have filled the maximum fields for comparison! Put the red box below the fourth hotel in the right sidebar.

 

Expand options with more than just 4 products.

Wrap 4 in a row and make it as the carousel. And of course, add a swipe option for tablet and mobile devices.

Move it even further.

Sort it in the row of 4. Put the mini list on the right sidebar.

 

Move it even further.

Use it for drag and drop.

 

Move it even further.

For older and less experienced users add illustrated tutorials.

 

 

 

Make it responsive.

With this technique, you can easily make it for smaller displays as well (Tablets, Phablets and Mobile). Reduce row numbers from 4 to 3 and for mobiles from 3 to 2.