WWW Search Redesign

Challenge

Part of the www redesign project, the OpenText external search engine required significant design updates that had to be communicated to their developer.

Concept

I downloaded the code for the various search screens, updated the CSS and HTML, and submitted the code changes along with a change document explaining the required updates.

screen shot of the old search results page
screen shot of the new updated search results design

Design

Beyond the necessary design changes, I also made alternative pages to improve the usability of the search tool.

No Search Results

When no search query is specified in the URL, the site returns what looks like an error message to the visitor.

screen shot of the no search results default page in the old design

Suggested Changes

Show the visitor a clean search page without any error messages or help text when the search query parameter is empty.

screen shot of a default search page with a search box and search button

Redesigned

  • Give focus to the search field when the page loads by adding the 'autofocus' attribute to the input
  • Display the original search query as the value attribute in the search field so the visitor can iterate on the query without retyping everything
  • Change the search field <input> type from 'text' to 'search'; some modern browsers display 'x' icon allowing the visitor to clear the search box

screen shot of the no search results default page redesigned

Search Results

screen shot of the old search results page

Suggested Changes

  • Display the original search query as the value attribute in the search field so the visitor can iterate on the query without retyping everything
  • Change the search field <input> type from 'text' to 'search'; some modern browsers display 'x' icon allowing the visitor to clear the search box
  • Remove the text beneath the search box; it's redundant because the search term will be visible in the search box; and the number of search results is also displayed just above the search results

About Me

photo: Rachele DiTullio

IAAP certified Web Accessibility Specialist

I believe in information integrity and accessibility for all through inclusive design principles and I have a wide breadth of knowledge in many areas of web standards and user experience design including HTML, CSS, cross-browser testing, accessibility best practices, information architecture, interaction design, wireframing, prototyping and usability testing.

I earned my Master's Degree in Information Studies from the University of Texas at Austin School of Information .

Contact Me