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.
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.
Suggested Changes
Show the visitor a clean search page without any error messages or help text when the search query parameter is empty.
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
Search Results
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 Rachele
IAAP Certified Web Accessibility Professional
- Web Accessibility Specialist (WAS) external
- Certified Professional in Accessibility Core Competencies (CPACC) external
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 external.