What does the team think?

[fisicx]

I've been fiddling and want your opinions on the layout of my comparison plugin.

This is the old:

404 Not Found

This the new:

Demo Calc | Testblog Testblog Testblog

[comparisons table=3]

testblog.co.uk

Ignore the blurb and theme and whatever. It's really just the bit inside the comparison listing you need to look at.

 

[Frank the Insurance guy]

I prefer the first one "all the things"

I prefer the name of the companies to be smaller and under the logo, so all I really want to see is the figures, as thats whats important. Can't see any benefit on having the companies as a "header" type of thing!

 

[Nick@Daydot]

On desktop the old one is more compact and the matched filters and key info are more together so I have to do less hunting and pecking with my eyes to access the information. The 'free ice cream' labels overlap with apply now buttons so that needs fixing. There aren't any 'free ice cream' labels on the new one so can't compare.

I also can't compare on the mobile layout as the matched filters don't appear.

I don't know what the 'all the things' heading means, and the text beneath doesn't help.

Re the specific comparison measures I don't know if the interest rate is annual or something else, and in the new one 'total to pay' and 'monthly payments' are more helpful than the old 'total' and 'payments'.

 

[fisicx]

The problem with the original layout was the lack of space. A logo, 4 data columns and a button doesn't give you much room for labels and larger values.

The updated layout give you a lot more room for meaningful labels.

I've now added the filters in mobile view on the new layout and the promo ribbon. This needs a bit of work as I'm not happy with the styling or position.

Them mobile view for both versions is pretty much the same. It's the desktop view that is fundamentally different.

You will also see on the newer layout is room to add longer product descriptions - something you couldn't do on the original.

'all the things' just means I've enabled all the options. You can turn almost everything off in the settings:

Comparisons without the bling | WordPress Comparison Plugin

If you want a really simple table of results you just need to disable the options in the settings. Or maybe just show the features…

comparisons.bankcomparisonplugin.com

 

[Nick@Daydot]

I'm still not seeing the matched filters on mobile but nevermind if you're focusing on desktop.
The main thing for me is the positioning of the matched filters which is centered in the original and left aligned in the new. See what they look like if they are centered like in the old one, or at least left aligned with setup fees

 

[fisicx]

Mobile phones hold their cache for a long time. Your desktop browser should have a right click inspect option where you can switch between desktop and mobile views.

On the new layout the features display below the logo as it’s a more logical place.

I should also point out that I’ve built dozens of custom versions for clients and the new layout is a bit of an mix of them all.

 

[Nick@Daydot]

Yeah I can see the matched filters on mobile, although the layout gets messed up on tablet settings.
Final (?) thought on placement of the matched filters is you could try it to the right of the brand name and then you could save vertical white space. I just had a play with that and think it looks ok.

 

[fisicx]

But….

That whitespace found be filled with a long company and product name.

You can also have up to 8 features/filters.

So not sure there would be room.

A German client has looooong filters labels. Eg: privatkrankenversicherung.

 

[Nick@Daydot]

Yeah I get you have to allow for edge cases. Just feeding back on what I see.

 

[fantheflames]

I prefer the new layout! Looks fab. It organises the information better and everything is well highlighted. Adding reviews or number of rating might be better in addition to the stars. Plus adding information icons next to key terms like 'interest rate' so users have more context. Other than that, it's clear and works really well. I fancy cheese dip now!

 

[fisicx]

Look at the page on your tablet or phone - it's what most people use.

Demo Calc | Testblog Testblog Testblog

[comparisons table=3]

testblog.co.uk

You will see their isn't any room to add the features to the right of the logo (I've tried and it doesn't really work).

@fantheflames - I make money by giving away my plugins for free. It means if they want additional features they come to me and pay for upgrades. This means adding the number of reviews, help icons and other features.

Note the glossary link you can click on as a teaser as to what can be done.

What I have done is implement something that's been in the radar for a while. You used to have to type in all the 'more info' in the settings with HTML tags and it was a pain in the backside. The system now works by pulling data from your posts and pages. If you have a page with all the info for Santander or BT or virgin or whatever the content of that page now displays when you click the more info link. Right now it's just dummy text.

And the promo ribbon is just one of many I could use. If you don't like it you pay me a few dollars and I add the one you do like.

Make money by giving away free stuff. It's quite lucrative.

 

[antropy]

I've been fiddling and want your opinions on the layout of my comparison plugin.

This is the old:

404 Not Found

This the new:

Demo Calc | Testblog Testblog Testblog

[comparisons table=3]

testblog.co.uk

Both rubbish, start again if I were you.

Just kidding

Paul.