How to Design a Successful Ecommerce Search Field Interface

The use of the ecommerce search engine can sometimes feel like magic. You visit the website, find the search field on the homepage, type in a word or phrase, tap the search button and voilà, your product appears right before your eyes on the results page. It can make a customer’s shopping journey quick and easy, if it functions correctly.

Research shows that many ecommerce websites’ search engines are unable to return specific results for products because not all users use the same terms when looking for a product or it can differ from the product name on the site. Another issue search engines run into are misspellings. If a user misspells a product’s name, it may bring the dreaded ‘no results found’ message.

In the end it’s simple: if users cannot find what they are looking for, they cannot buy it. Not only does this lead to a loss in sales from that specific session, it can also mean the loss of a loyal customer and their lifetime value.

Throughout research and user testing, it is said that not only does the search engine itself need fixing, but the search field interface design was proven to be just as significant for users to find the product they are looking for. Let’s discuss the importance of designing a successful ecommerce search field interface.

The search field is often overlooked if it appears ordinary and is positioned in an unusual way on the page. However, when the search field is noticeable, users are encouraged to search for products without the help of going through the category pages. It can be highly valuable for industries that rely on the search engine to promote their search field with a clear design and position, specifically on the homepage.

There are several design elements that can be utilized for the search field in order to encourage users to successfully use the search engine. However, the three design elements that have the greatest value and impact are position, style and size.

The position of a search field must be simple and straight forward. The standard ‘go to’ is to place search fields in the top right corner or center of the header, as this is where users will expect to see it.

Industry West is an example that displays a search field placed on the top right corner while Bliss positions the search field in the center.

Utilizing less space can catch a user’s attention. For sites that only have a few items in the navigation, the search field can be aligned with the categories. This allows the search results page to appear directly below the search field rather than seeing a line of categories separating the two.

Calvin Klein aligns the categories and the search field together.

The style of a search field must be prominent and simple. A couple of core user interface elements that put together a search field are the search field’s background color, border color and shape. Elements also include input and placeholder typeface, color and size as a call to action (CTA) button with either text or a magnifying-glass icon.

Utilizing color for the search field background, border or CTA button provides more of a contrast and the field will therefore naturally become more prominent. It is one of the most effective ways to emphasize a search.

Target and GE Appliances are examples that display a contrast between the site header, search field and search button.

The final element that has an impact on the search field engine is size. Designing a search field that is too short is one of the few common mistakes amongst designers. It is considered bad usability when only a portion of the text is visible in a shorter search field. This makes it difficult and inconvenient for users who try to edit their search queries.

Amazon and Etsy are examples that show a wider search field.

A growing search box is another design element to consider for longer search queries. This utilizes less screen space while offering the user sufficient visual cues to instantly use the search field engine.

Nike is an example that uses a growing search box.

The use of the search engine is vital and often one of the most frequently used design elements on ecommerce sites because it is generally the preferred product finding strategy. The design of the search field is just as important as the functionality. Adding minor changes such as the correct search field size or slight contrast between site header and search field background can significantly improve not only the search usability, but also the overall user experience. If your ecommerce search isn’t giving your users the results they desire, let us know, we would be happy to help.

Women in Tech

My Journey from Full-Time Student to Interactive Designer

My experience here at Something Digital has been an exciting journey. This is my first full-time job, so I was not sure what to expect, especially in an agency. Most of my past internships have been at tech companies or in-house. As a Communication Design major from Parsons School of Design, I was eager to work in an agency after I graduated since I knew working with many clients and working on multiple projects at the same time would be great exposure for a young designer like me starting a career.

I recall going to the Parsons Fall 2018 Career Fair and discussing my senior thesis project with Mickey and Yasemin. That same week I remember nervously entering the SD office for my first interview with a couple of the team members. After two weeks, I got a call saying I was hired for the position of an interactive designer on the creative team.

My first day was filled with a rollercoaster of emotions. I was nervous, shy, overwhelmed and excited all at the same time. There was a lot of information to process, from how to set up my work station, to learning how to see my work for each day, to logging in my time. What helped me the most going through the day was the positive environment of Something Digital. Everyone was very welcoming and friendly. My coworkers on the creative team helped me with any questions I had. I believe an office filled with talented, energetic and positive coworkers who encourage each other and make others feel comfortable around one another is the best environment to be in, and that is exactly what Something Digital offers.

Throughout my time here, I have learned numerous skills on design tools such as Adobe Photoshop and Sketch. I’ve been exposed to a variety of UX concepts I can now utilize in my work, how meetings are structured and presented internally or with clients, as well as what components are included in ecommerce design. Most importantly, I have learned how to juggle multiple clients/projects at the same time. The difference between a full-time student and full-time employee working on multiple design projects at the same time is that for school, it was internally for my professors. However, working on multiple designs as an employee in a design agency is a totally new experience. I am acquiring real world experience through my daily interactions with our team of programmers and designers, as well as our clients. Being able to see how my designs help our clients and their businesses is a great feeling. It feels rewarding to see my designs on a staging site or website that has been launched for the public to utilize.

Overall, my transition from a student to a full-time employee has been unexpectedly enlightening. I have gained a lot of experience from the various projects I have completed and from speaking and interacting with my coworkers. Something Digital provides me with an opportunity I did not know I would receive in an agency. I am excited to continue my journey here becoming a stronger, more experienced designer in the process.