Should Mobile Header Design Use Big White Area for Large Male Thumbs when 65% + of Visitors are Male?
-
About 65% of our visitors are male. Consultant "A" produced design "A" (see attached). This design incorporates large white areas so there there is sufficient space for male visitors with larger fingers. Consultant "A" also was of the opinion that the menu "hamburger" bar should have the word "menu" under it and that displaying it would increase conversions.
Consultant "B" is of the opinion that displaying as much content above the fold is key to maximizing conversions. They believe that we don't have to use so much space between elements and that the word "Menu" is not necessary to display beneath the hamburger. I have enclosed design "B" from consultant "B".
Personally I prefer the 2nd design, however I understand that conversion is down to a science and there are certain accepted protocols and standards that serve to increase conversions.
Does anyone have opinion as to which of the 2 attached designs would work best for conversions?
Thanks,
Alan -
I tend to opt for a min height and width of 48px X 48px (12mm X12mm) on all mobile button / click zone designs to accommodate fingers on a screen, that also applies to input fields too to make them easier to handle.
As for the design aesthetics, I think a blend of the two designs would look the best. The spacing is neater on design B, but I actually like menu on the button (some may disagree). Best bet would be to set up the two designs and run as optimisation test to see which performs the best over a control period and then add some Multivariant tests trying some blended designs.
Maybe use something like hotjar to record the clicks too, that way you can see if your hit zone/button sizes are working well.
Cheers
Tim