4 Easy Tips for Bootstrap Form Design
Building a Better Bootstrap Form for Battlesnake
When play.battlesnake.io was first built, speed was the goal. That’s why we used Bootstrap 4 and a lovely admin theme that we purchased. This means our team can focus on releasing cool features without having to worry too much about design. This ‘quick build’ mentality meant that once the Create a Game form provided basic functionality we moved on to building other parts of the Battlesnake platform.
This let us get the platform up and running super quick and everyone was creating Battlesnake games and having fun!
And then we started thinking… “What if anyone could create a game?” — we said to each other in unison (yes, it happened just like that.) Then there’d be no need to create an account to enjoy Battlesnake!
This sounds great, but it meant that folks could land on the Create a Game page with little to no understanding of what Battlesnake is. (Battlesnake is our free platform where anyone can write a program to play the game ‘Snake’ and compete against other developers. But they might not know that!)
The Create a Game form needed to be friendlier, especially for people fresh to play.battlesnake.io.
Looking at the form above, would you know what to do here? Probably not! The Create a Game form needed to be friendlier, especially for people fresh to play.battlesnake.io. I was tasked with improving it quickly, so I listened to feedback from our users and tested the form myself a whole bunch and came up with some core issues I knew I wanted to address:
“What am I supposed to do here?” — The form needs clearer goals.
“How am I supposed to do that?” — Better visibility for helpful features.
“ACK, I didn’t expect that to happen!” — Reduce undesired actions!
“How do I use this form quickly?” — Make repeat actions easier.
Now that I knew what was bothersome about the form, it was time to create some solutions. On to the tips!
1. Show Clear Goals
The form was very wide and didn’t say much about what it wanted users to do. Adding colorful headers with numbered steps helps carry you through the process to create a game of Battlesnake. More accurate labels also help make it clearer what each input is for.
It’s now much easier to absorb the goals at a glance and the bright numbered headers draw your eye down and lead you through the form.
2. Align Content Vertically
Aligning content vertically is an easy way to tidy up a form. This form was already left-aligned, but the “Add Random Snake” button was hidden on the far right. Adding a random snake is a great tool for newcomers and we wanted to encourage its use.
Moving the “Add a Random Snake” button onto its own line and left-aligning it with the rest of the important content makes it more visible.
3. Reduce Accidental Clicks
It was easy to press “Create Game” when you really meant to add a snake on the old form. This happened to our team members a couple of times, and it meant going back to the form and starting from the beginning. To address this I placed the “Create Game” button away from unrelated inputs, isolating it in order to help reduce accidental clicks.
The added benefit of moving the Create Game button further down is that it is now the obvious final step.
4. Make Repeat Actions Easy
The core functionality of a form shouldn’t move around on you, especially actions that are likely to be repeated! Clicking “Add Random Snake” multiple times meant chasing the button down the page as more snakes were injected into the rows above.
Moving the snakes into their own section stabilizes the form. Now it’s fast and easy to SEND MORE SNAKES TO THE PIT.
In conclusion, it wasn’t until we considered who would be using this form that we knew what was needed to make it better. It’s one thing to know something is bad design, but it can be a challenge to decide how to make it better. Taking the time to think about who will be using the form helps you make better-informed design choices. And once we had a plan, these changes were very quick and easy to implement.
I had to stick to a tight schedule but I think this form could be even better with some more user testing. More whitespace? Ditch the “Board Size” dropdown for radio buttons? Let me know in the comments if there is more you would change! Better yet — come help make play.battlesnake.io even better by joining us on GitHub or the Battlesnake Slack.
Thanks for reading!
My name is Aileen and I work in Customer Success @Dyspatch, I’m also a developer @Battlesnake. I like plants, coffee, and forget my phone places too regularly.”
