Form Design Tips You Should be Using

By Jennifer Neighbors, Senior Consultant

While your databases should have logical architecture and bug-free coding, nothing takes your work to the level of excellence like a masterful user interface design (“UI”). Table forms that are simple, consistent and pleasing to the eye make an enormous difference in how the user experiences a database. Let’s look at a few techniques you can use to take your database from bland looking to beautiful.

Background color – Are you still using the Ninox default color for your tables? If so, you’re missing out on an enormous opportunity to enhance your table forms. Think about what color the user might find pleasing. Consider a color that coordinates with a logo they are using for their business, the colors in their web site or their business cards. Make sure it isn’t so light that the user has a hard time distinguishing the form’s fields on the form, but don’t use anything so intense that it’s annoyingly loud or garish. It also needs to look good next to the Ninox blue of the navigation pane on the left side of the database window. To try a color, place a tab on the form and drag it to the top of the table’s field list. Then set the tab’s color property to your desired color by entering its RGB value. Unless you have a very good reason, it’s best to use the same background color for all forms in your database.

Object colors – Continue your color scheme by coordinating the color of buttons, headers, borders and lines with your background color. Instead of using the default blue for buttons, for example, use the style function to give them a color that works well with your chosen background. Click the style box, click background color and then select RGB. Enter the RGB value for the color you want to use and then click once on the resulting color. Press OK and save your work.

Field styling – Apply a consistent style to your fields where doing so tells the user what to expect. Do you style your formula fields in such a way that the user recognizes them as fields where no input is needed or allowed? Are you using the tooltip function to explain the purpose of fields whose intended use is not obvious? You should be. A confused user is not a pleased user, so do whatever you can to make your fields predictable and understandable from one field to another and from one form to another.

Symmetry – Line up fields so as to avoid a scattershot look. It’s okay to add fields at random when you first create your forms, but, before you present them to the user, take time to line up your fields and group them into logical sections. Don’t crowd too many things into too small an area on the screen. Think about where on the form headings might make things more organized.

Hidden elements – The ability to hide fields and form objects using the “display field only if” function is a gift. Use it. There are a variety of techniques for hiding and exposing fields and other form objects based on criteria of your choosing. For example, if the user selects an option in choice field 1, choice field 2 is exposed – otherwise it’s hidden. Experiment with this kind of thing to simplify your forms.

HTML – Not only is there a style function for most fields, but also you can make use of HTML to extend your styling options. This is useful in creating striking headers and titles where information is displayed with emphasis placed on particular elements. The basics of HTML are easily available online and don’t take long to learn.

Logical Thinking – Put important things first and take time to think about those who will use your form for the first time. Will the purpose of the form be obvious, and will the user instantly understand what to do? If not, slow down and take time to see it through their eyes and arrange the form accordingly.

Here’s an example of a nicely formatted form.

The form’s title was created using this bit of HTML in a formula field:

html(“<b>Sunshine</b><br>&nbsp&nbsp&nbsp&nbsp&nbsp Wellness</br>”)

The color and the font size were applied using the field’s style function. The field’s label is set to “hidden”.

The background color of the form works nicely with the theme of the database. Notice how the color of the title’s font matches the color of the buttons and looks nice against the background color? The fields are nicely lined up with the most important information on top.

Any of these design techniques will pay immediate dividends in improved form design and better user experience.

Jennifer welcomes feedback and can be reached at jennifer@nioxus.com.

en_USEN