Font-end developer focused on inclusive design

Clean and intuitive search form

In my opinion, a search form is an important part of a website.I also agree that there might be cases when the search form is not needed on a website.

However, today I want to share my experience of creating a clean and intuitive search form.

Problem

In some WordPress themes made for Themes Harbor, I had a need to design a minimal, yet intuitive search forms.

A form should contain a clear input search field and the Search icon.

Below, an example of such form, presented in the Aquene theme.

The problems is the form is not initiative.

People have different levels of expertise of using computer technologies.

While some people when see such form already knows how it works, others might need a moment to figure it out.

How do I search? Do I need to click somewhere to start a search? Or just start typing? What's next? How to run my search?

Such, or similar, questions might be raised when using a search form, illustrated in the example above.

The goal is to avoid raising questions when using a form.

Solution

To improve the search form in Aquene, I decided to add more information, while keeping it simple and minimal.

First, I tried visually provide hints how to use the form:

  • create visual separation between the field and the icon;
  • highlight the Search icon;

Second, I added a short text information on how to use the form. In case, visual changes do not help to make the form intuitive.

Below, an example of updated form, presented in the Aquene theme.

Moreover, I improved usability of the form in mobile views.

When using a mobile device, the text information below input field and the Search icon are hidden in a favor of a mobile interface.

Since the form is autofocus, it automatically displays an on-screen keyboard in mobile devices when using the form. It provides the visitor a hint to start typing.

The on-screen keyboard also includes a search button in accent color to give an information on how to run a search.