Four interface states to check before developer handoff
Define the empty, loading, error, and completed states for a single search box.
If your product search design file always shows six perfect results, the developer will be forced to design the four most challenging real-world scenarios on their own. The user might not have started typing yet, might be waiting for a response, might have lost their connection, or the product they are looking for might not exist. The content displayed on the screen must change for each of these situations.
Test the search process using a single word.
Type in a product name. Does the word you typed remain in the input field while the data is loading? If there are no results, can the user correct their search term? Is it possible to retry the same search if a connection error occurs? Also, specify when the previous list of results should update if a new search is initiated while results are already displayed.
When delivering UI/UX work as a freelancer, it is often sufficient to place these states alongside your main design and note the trigger and subsequent action for each one. Walk through the search process using your keyboard alongside the developer. If the typed term and the input focus remain in place after returning from a successful search result, the user can continue exactly where they left off.