Dear all, I am trying to get a button/link integrated on my website that pushes down when clicked to meet a form on a website. My designer put together the idea, however mydeveloper is unsure how to proceed. The CMS we are using is Wordpress. The site is: http://healthcareinsured.co.uk/ The button/link I refer to is the "Get my free qoute" in the top right hand corner, just to the left of the menu link. My designer has suggested the following as a solution- >>Hmm possibly with javascript. Or a transform code on the button on click that would be where I would start. If it's not possible perhaps on button click the form could just have a border added to it? I have also attached the original design mockup and her instructions which explain how it is supposed to work and look when pressed http://s000.tinyupload.com/index.php?file_id=48802369301704464479 >> PAGE 2 PDF: The second page of the pdf shows rollover or click states. For me so far the only clicks which will occur are in the first section. I thought it was useful to have a call to action button for the form as well as the form on the homepage in line with the menu navigation - if the user was to highlight or click the 'get my quote button' - top right page2 of the pdf, then the link would then appear as on page 3 of the pdf. On hovering or clicking on the blue / white menu button - top right page 2 of the pdf it will turn green / with blue text as on the page 3 of pdf On hovering or clicking on the get quote button inside the form (blue / white) on page 2 of the pdf the text will change to the same green as the form background to show users it's interactive as per page 1 of the pdf. Can anyone explain in detail how this would be integrated? Thanks in advance.
Are you saying you want the button at the top to do the exact same thing that the button on the page does? or do you want to see it look like a 3D physical button is being pressed? What is the purpose of having the button in two places at once?
No it's so that the button when pressed it pulls down to close the gap between the form and the button, to draw extra attention to it. I suppose that's a good question as I don't think it's neccessary, I could just have a red solid arrow that points down to the form and call to action.
Uhm... Okay - the design, and your question, is completely irrelevant. First: both the button, and the form, is completely visible at the same time. There is NO WAY people won't understand it's the form in question. I can understand having the button on smaller screens, where you might have to scroll to get to the form, but... yeah. No real use on a desktop/laptop screen. Second: just have the form focus on button press. And, add a brighter color for the form background, or a border around the form indicating it's active. Third: you should look into having different text on the menu button and the "get quote" button inside the form. Currently having the same text might be confusing. Four: you're overthinking it.
Okay thanks. Yes I had thought that the button was unnecessary myself. A bright border sounds good. What colour would you suggest for the background? I have also been thinking of changing all the blues to "Bing Blue" as I've read it is the highest converting blue.
The color-theory might be beneficial, but it might also not have any significance at all. As for the background, you might not have to change it if you add a border, but if you do, I might suggest keeping the current, light green color as the "active" color, and maybe use a subdued yellow/eggshell color as the non-active color.
Can you explain what you mean by active/non active colour- do you mean sections of the form which need to be filled in? And if I were to add a border, what colour should it be? I was thinking red, but it looks a little too stark in terms of contrast tot he form colour even though it would draw attention, it may look odd.
Active: when the form is in focus (being filled out) - in focus Non-active: when the form is on the page, but not currently being used Ie. the same thing about the form changing color. As for the border, I suggest a darker tone of the active color - if you keep the green you currently have as the active color, try a border with a darker green color, for instance. A good rule for web-development is to keep the amount of different colors to a select minimum - say 5-7 colors total. However, within those main colors, you can change the hue of the colors, so you actually have quite a few more colors to use - all the shades of each color (although, of course, that would make a horrible page - so stick to maybe 2-3 shades of each color). In addition to those main colors, you might use extra colors for warnings, errors and such,which are meant to contrast to the rest of the colors on the page. Last, but not least, is the importance of keeping colors contrasting - basically following WCAGs recommendations, to make sure the page works for every user, regardless of visual impairment.