A common issue I run into when I’m trying to create high fidelity prototypes is dealing with form styling. Users expect crisp and intuitive interactions when dealing with forms, and it’s important to oblige, given how boring they are, and the risk of having the user bounce. Forms also tend to be one of the most important parts of a website (you want them to subscribe or go through checkout with their products don’t you?)
So in this post I’m gonna run down how I handle input styling in Axure, including best practices for making your prototype easy to work with as it increases in complexity.
1) Drag and drop a rectangle onto your canvas.
This is going to act as the input container. And the styling is actually going to go here. It’s a good idea to give your widget a name, so it’s easy to find as you are adding interactions to it. I usually call it “input – container”, then add the label name to the end when I actually insert the input into a form.
2) Size the rectangle as big as you want the input to be.
For this example, we’ll go with 320px by 50px.
3) Drag and drop a text area onto the canvas, and size it a few pixels shorter than the input container.
I’d go with something like 305px by 42px. Also give the input a name, so you can easily discern the input from the input container.
4) If you haven’t already done so, middle and center align the input with the input container.
5) Hide the input border, and set the fill color to transparent.
The input will serve only to show text, no actual styling will be done on the input.
6) Now give the input container the styling you want, with many more options available to you than the native text area allows.
I tend to keep inputs simple. A small border radius can look nice, along with very light inner shadowing. The real power of going through the trouble of styling an input like this is you can now give the input a proper css style :active state. In Axure terms, that would be the “selected” interaction style which appears when the input has focus.
To achieve this effect:
7) Add styling to the “selected” interaction style of the input container.
I wouldn’t go overboard with this. A 1px solid border with a color that matches the overall site palette usually looks great.
8) Add logic to the OnFocus and OnLostFocus events of the input.
OnFocus – Set is selected of [input – container] to “true”
OnLostFocus – Set is selected of [input – container] to “false”
This will give the input the illusion of having an active state, even though it’s merely the background element changing states.
And one more bit of housekeeping to ensure your prototype is as functional as possible.
9) Add an OnClick event to the input container.
Since the input is smaller than the input container, the user could potentially click on the input and have nothing happen. This is a minor point, but if you are going for high fidelity, it’s a good idea to cover all of your bases.
OnClick – Set Focus on [input – container]
And you’re all set.
Once you have this done, consider creating your own library and adding this widget to it. Then you can drag and drop better inputs fast, without having to go through these steps each and every time.
Hope you found this quick tutorial helpful.