The contact page redesign
The redesign journey continues. Today I tackled the contact page. To many people a contact form seems simple but not only is there more happening behind the scenes than people realise but designing a form with good usability is not easy.
Sure, a simple form is easy. Name, email and/or number, message send. But what if you need a more complex form or a long form?
No one likes completing forms but sometimes we need them. How do you make a long form easier to use? Well keep reading and you’ll find out.
This is also a great place to add basic contact information like phone number, email address and social pages.
It’s All About The Details
Looking on the right first, basic contact details. I added icons that when clicked or tapped perform an action. The phone icon will start a call when on a mobile phone or other device that can make calls. The email icon will try to open your mail app or service. The WhatsApp icon opens a chat in the mobile app or on desktop, starts the WhatsApp Web interface.
Even though I provide the details on the screen I still want to make it as easy as possible for people to contact me. So no need for copy/paste. Magic.
Then we have the social media icons to follow on the various platforms.
Then we come to our form. At first it’s a basic form right? Wrong. I used a magical thing called conditional logic. Basically if this happens then this should happen. It’s how I set the form to only show certain things based on choices.
So if someone just has a simple query then this is it for them.
Choose “General” and a send button appears, click it and away goes the form. But choose “Project” and you get a button that takes you to the first page of the creative brief. What’s great about this is that I’m not forcing extra stuff on someone who doesn’t need fill in the extra fields. And because the buttons only appear on the choice I’ve eliminated the confusion.
The Creative Brief
The creative brief is the best way for us to get all the information we need to figure out more about what you need. This allows us to work out a quote and tells us most of what we need to know. It can take some time to fill in but it saves time and miscommunication.
To make it a bit easier I’ve broken it up into pages. Smaller bite sized chunks and as long as you come back to the same browser and you haven’t cleared the cache or cookies your information will be where you left it.
It’s Only Logical
Here’s a smaller example of conditional logic. If you don’t have a logo then there’s no need to give you the extra field. The link field only appears when you choose the option that you do have a logo or brand. All of this is an effort to make the process of form filling less tedious.
Skipping the 3rd page because it’s just a boring form page, page 4 ends with another choice. If it’s a new site you need you get the send button and away she goes. You’re done.
But site redesigns have a few extra questions. To get those on a new build will only confuse the issue. Instead we put that on another page.
And there you have the new form experience at LiveFuse. I tried to make the basic form as simple as possible and allowing the option for a more in depth form if it’s needed. I also realised that creative briefs can be long and tedious so I’ve worked on making that an easier experience too. I hope I’ve succeeded.