[1/10] Become a Full Stack .NET Developer: Usability Best Practices

In this module, we learnt the basic theory behind web application usability practices and how we can apply these relatively easy to implement practices into reality in our GigHub app, to offer our end users a more welcoming and stress free experience. While usability could be its own separate course entirely, the basic tips we learnt here, would serve any web developer well to follow.

Here are the areas of web usability specifically concerning forms that we covered:

Form Labels - To summarize briefly labels describing form fields should be short and written in concise and unambiguous language. You should avoid left aligned labels as there is more eye movement and tracking involved with them (therefore more cognitive load for the user, deceasing usability). If possible top aligned labels are the best, and only were when vertical scrolling space is an issue then you should use right aligned labels.

Form Fields - With form fields, less is more. Capture only what is essential, while keeping any optional fields to a minimum if necessary at all. If you still have optional fields they should be visually separated from the mandatory fields. If you still have quite a few fields in your form, try and group them in a logical way that forms a natural progression for the user as they work their way down your form. Finally when a form page first loads, the mouse focus should automatically rest of the top field of the form to save the user that one extra unnecessary click.

Form Actions - Each form should have a primary action which should be visually distinguished from other actions on the page, such as a Submit button. Secondary actions could include a Back or Cancel Button (if possible it might be best to remove secondary actions entirely). Therefore the Submit and Cancel button should be different colours or styled differently, so that the primary action stands out more. The primary action button should be properly aligned with the rest of the form as too avoid too much eye tracking.

Validation - Firstly any validation messages (when a user enters bad data) encountered should use clear and concise language. Secondly, to reduce the cognitive load on a user error messages should be transmitted in red (the universal colour for a warning or error), while positive validation messages should be styled in green (the universal colour for a compliance or acceptance). Finally, if possible smart defaults should be provided on forms for users. For example, on a Location field, we could detect the user's IP address (or use HTML5's location API) to automatically fill in their country of origin.

Our Add a Gig form after applying a few usability practices to it.

Following on from the theory section of this module we proceeded to see what usability issues we could address in our GigHub app as developed so far. We were able to use Chrome Developer Tools to identity HTML and CSS elements that we could then tweak to our preference.

Any HTML changes were added to the RazorView of the Add a Gig Form(Create.CSHTML found in the Views folder), while CSS changes were added to the Site.CSS file (not a Bootstrap class but defined by ASP.NET MVC).