Skip to content

Web Forms without Usability is harmful

Now a days usability (UX) is one of the most important quality criteria to have in every application. A well designed application that focuses on ease of use of end user can only survive in this competitive world and convert users to customers. But the Designers today are more worried about the looks, how clean and attractive is the site rather than focusing on enhancing user experience.

I believe UI is part of UX but design alone will not improve user base, sales, competition unless it’s not focused on improving user experience.

I was working on one of the testing project. My client’s website looked stunningly attractive. Aesthetically pleasing front page UI was enough to attract users. The website talked about their business model and work done in past for various clients. The front end design to some extent fulfilled the business idea.

But their contact form was almost invisible. Though it was inheriting the website theme but was impossible to figure it out easily. Definitely, any pair of human eyes would fail to notice its existence. Now, Users are always multi-tasking when viewing the webpage. So, the chances of overlooking important things are always high.

The Contact Form in discussion here had worst user experience. Entered details in the fields had dark grey font color over black background. It is impossible for end user to review the form before submitting because user has to click on each field to read entered data otherwise not visible.

It felt like as if i was doing all the guess work.

I strongly felt the need to improve behavior of the form. I informed my client about the usability issues but they wanted to keep that form as is because it fits the theme and the page looks uncluttered.

Bad example of Usability web form

Contact Form: If you notice, I have entered data in all fields. Only on mouse hover, i could see the “Go” button.

While filling this form, I was confused, frustrated and surprised with its behavior. If modernity in web design puts end user in trouble and forces him to do guess work, it’s nothing but a disaster for business.

Pros: 

  1. Form represents website theme
  2. Minimum space is used
  3. Modern design of placing fields and button

Cons:

  1. Field label is missing.
  2. Placeholder text disappears after user inputs text inside the textbox.
  3. Labels are inside the field.
  4. Input text is invisible. User has to mouse hover on the field to see text.
  5. Textboxes and buttons are not prominent
  6. Error message is not visible or can’t catch user’s attention due to black background of the page.

Disappearing placeholder text, fields without labels, grey text in form field’s background, these usability issues discourage a user to fill the form.

I totally agree that we need attractive designs to represent businesses uniquely but at what cost. At the end, only human uses websites and they should be able to use them with ease. Interaction should be hassle free and customer should leave site with a positive mindset.

Below example illustrates the simplicity and minimalist design with ease of form usage. One can easily understand the fields as proper labeling is done. This account creation form prominently display textbox fields, label and placeholder text. The idea is to keep it simple yet attractive. Thus, Customer can focus on account creation.

Good example of Usability of web form
                     Account Creation Form.

Pros:

  1. Simple yet attractive
  2. Labels are present for all fields
  3. Placeholders becomes label when user starts typing in. This is called adaptive labels.
  4. Error messages are visible
  5. Text color is black and background is white hence easy to read
  6. Single column to maintain the momentum of form filling.
  7. Cursor is prominently displayed within the field.
  8. Focused field highlight with blue border
  9. Prominent form heading is displayed
  10. Fields are big enough and spacious

Cons:

  1. User may not notice fields having placeholder text within it.
  2. User may mistakenly consider placeholder text as data

Being a tester, we need to educate our stakeholders about usability as quality criteria to be considered on priority.

Nowadays, the need is to design good looking websites that hides complexity and increases user interaction.

Satisfactory user fetches more revenue to the business.

Remember, it’s the Tester (other than end users) who can raise concerns about usability.


Sign Up for our newsletter. Get tips on learning Software Testing and Automation.

Follow

Savita Munde

Tester at Mindhunters
She is a Tester by profession. Works on various freelance QA projects. And she is twin's mom.
Follow

Latest posts by Savita Munde (see all)

Leave a Reply

Your email address will not be published. Required fields are marked *