User goals
Users want to be able to find unique objects within Octopus Deploy, such as pages, projects, variables and many other objects they have created within our application.
A user also expects to execute a search from anywhere within the platform to perform this task as required.
Best practices
|
Default state Consider the context and use it to clearly label the default text. In the example provided its a search on the variables page and have used the default text to reiterate the search context Search in variables... Global search may simply be Search for... |
|
|
On keystroke Indicate that something is happening by showing the results direction beneath the input field. Design the results in a way that the character has been searched for is highlighted on the results text. |
|
|
On empty state / no results When there are no results ensure to have some kind of visual or simple graphic as this helps to draw attention to something has happened. Simply state what has happened. See error message microcopy for further reading. |
|
Using search in different contexts
For us search can be used in a variety of places such as Global Search, In-page Search and Contextual search. A contextual search in a bounded to an area such as searching for spaces or perhaps a set of large data that you can select from in a form e.g. variables.
Applied UX Principles
Proximity : Ensure loading & empty states are within close proximity to the input or within the same visual bounds.
Doherty Threshold : Consider the API response time and provide an loading interaction if response is longer than 400ms
What to avoid
Search is a primary action and should avoid being used as a secondary filter option for example below:
Components used
For searching within a bounded context such as a menu we use textInput and menu object containing listItem
For an in page the results list could use components such as table or listItem depending on what information is being displayed. Recommend taking a look at our UI templates to help guide you further.