You are currently viewing Basic Design Guidelines for Developers – When you have no mock-ups in place

In an ideal world, a developer should have all the design comps before they can start development, but there are occasions where a developer have to deliver a POC or small few pager sites with basic instructions. At this point of time I have seen them struggling with basic UI/UX stuffs. The functionality works well but UI needs some touch up even those are POC or internal application. If as a developer we follow some basic UI/UX guidelines the POC or internal project can look amazing.Below are some of my points, feel free to add more:

 

  • Make sure you maintain consistency in design: fonts, colours, font casing, buttons etc.
  • Use Proper English where ever applicable.
    • It’s a common mistake that when we get details from database, we do not change the label for example: we display “FirstName” instead of “First Name”.
    • Maximum details should be provided while displaying validation or error message
    • Appropriate punctuations (comma, full stop) should be applied in the text.
  • Always have an identifier about mandatory fields in a input form. For example (*) in the mandatory fields.
  • While using multiple controls in the forms, make sure we have consistency in fonts, styles etc in all the form fields unless it’s specified.
  • Do set tab orders in forms it should flow from left to right and top to bottom, unless there are specific instructions.
  • Use controls wisely on the forms, such as if you single selection item less than 4-5 use radio button controls else go for drop-down controls. In case of multi-line select boxes
  • As a best practice provide some basic instructions along with form field name such as: allowed number of characters, type of characters allowed etc. We generally provide these details at the time of validation after user have made the mistake.
  • Check alignment of the entire page and the used controls.
  • Use client side validation as much as possible but that the sanity check needs to be done before you insert any data in database.
  • Use client side validation as much as possible but the sanity check needs to be done before you insert any data in database.
  • Do not write inline CSS, this can work for you in short term, but will increase your work in long term.
  • Image names should be proper and self-explanatory.
  • As a best practice, provide instructions / notes on how to fill the form or how the form data will be used preferably at the top of form or as a tool tip like
    • Minimum characters
    • Maximum characters
    • Numeric/ Alphanumeric field
    • Date format
  • DO NOT leave anything for the end, that will only get caught either in QA or can never get resolved.
  • Display success or failure message after each form submission. The message should be understandable to the end user. For e.g. after successful submit, if your site is sending a mail, we should inform the user about email notification.
  • All logically related fields should be aligned or place together. For e.g. while filling user details, the field sequence should not be First Name, Address and Last Name and should be First Name, Last Name and Address.

There will be many other basic guidelines, feel free to share that is in your checklist 🙂

 

Ravi Ranjan

Ravi Ranjan is Business savvy and Technically sophisticated professional with experience of more than 14 Years, reflecting strong leadership qualifications, primarily in Project management and Business Analysis. Currently spearheading as Project Manager and handling Techno Functional role in an IT Firm in Mumbai.

Leave a Reply