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

Search Results Page - before

screen shot of the new updated search results design

Search Results Page - after

Design

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

No Search Results - old design

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

No Search Results - 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 - old design

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

As an information architect, interaction designer and web developer, I believe in information integrity and accessibility for all through universal design principles and web standards.


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 iSchool.

Contact Me

LinkedIn

LinkedIn

Location

Austin, Texas

Phone Number

512.795.4850