Redirecting to default login... List Views – Search Functionality – Mobility Center of Excellence Team Website

This Case Study has been Archived. It’s content is historically relevant, but some content may be out-dated.

List Views Search

Our previous List View case study focused on font size. This List View case study will explore adding in a search functionality and adjusting some navigational items. These changes clean up the look of the application while making it more useful and intuitive.

The below example illustrates the original Clinician Connect design with the list font size increased to 16 pt, and compares it to a re-designed version with additional changes.

List View Search Graphic Annotated


List View Search Graphic Annotated


The following changes were made for the re-designed version:

A – Locations – The “< Locations” navigation item is added to the upper left hand corner. This follows standard mobile navigational convention. This is where the users expect to see this type of backward hierarchical navigation.
B – Pleasanton – The “Pleasanton” location identifier remains in the same position, but it is made smaller and put onto a lighter blue background to blend better into the page. While this information is important, it is not the most important thing on the screen, and therefore should sit back in the visual hierarchy.
C – Search – The “Search” capability is added as a replacement for the scrolling letters. This cleans up the look of the screen, and provides additional functionality by filtering down list items based on the letter a user types.
D – Tabs – The font size on the navigational tabs at the bottom of the screen is increased for better readability. The color of the deactivated tab is adjusted for higher contrast to assist in readability.

All of the colors used in the re-design adhere to ADA contrast ratio AA standards.


See the final version of the re-design below:



Using a search function is advised for lists that have over 10 items. Be sure to adhere to standard navigational conventions and consider font size and colors when making your designs, and you are sure to have a visually appealing and well functioning application.