BACKGROUND
In it’s conception, App Orchestration was created, designed and developed by some brilliant engineers and architects as a prototype of what they believed the business needed. The business bought in, but my role didn’t come into play for nearly 18 months after it’s conception. Needless to say, the user experience was poor. The one element that was most needed was search
CHALLENGE
App Orchestration holds a lot data and needed a way for users to find it. Once the business realized the brilliance behind this concept and bought in, they wanted to release it to market immediately. It was 18 months before UX was invited to the table. A lot of things “couldn’t be changed” and now with the urgency to release it, there was little room to add “nice to haves”
SCALABILITY INTERACTION DETAILS
Tables
• Tables in list pages, detail pages, wizards will be be searchable
• By default, we will show the first 1000 entries in a “table” the user can click the [ Show More ] button
• the numeric count will be show above the table, left aligned.
• arrange by, filter by and search will be above the table, right aligned
• the options in arrange by will vary based on the page it is on
• the options in filter by will vary based on the page it is on
• The search box will search only for items found in the first column (not health), which is typically titled name
Search Implementation details:
The autocomplete pattern is used in combination with a standard input text box that is labeled to match the user’s expectation of what field will be searched against 1.
As the user types in data, a list of suggested items that match the inputted data is displayed. As more text is inputted, the displayed list is updated to matching the updated query – narrowing down matching items.
The list of suggested items is displayed directly beneath the search box
It will highlight what part of a suggested item that matches what has been inputted.
Allow the user to cancel the suggested items list by pressing the ESC key. Pressing the ESC key causes the suggested items list to close, however typing in more characters after pressing the ESC key will restart the autocompletion behavior.
NUMERIC INTERACTION EXAMPLE
If there are 1233 total items, show:
Displaying 1-1000 of 1233
If there are 10000 items, show:
Displaying 1-1000 of 10000
If there are 10000 items, and the user gets to the bottom of the results and clicks [ Show More ] button, we display and additional 500 results, show:
Displaying 1000-1500 of 10000
If there are 10000 items, and the user gets to the bottom of the results and clicks [ Show More ] button, we display and additional 500 results, and they get to the bottom and they click [ Show More ] button again,, show:
Displaying 1000-2000 of 10000
If there are 588 total items, show:
Displaying 1-588 of 588
If a search is entered and only 12 results match the query, show:
Displaying 1-12 of 588
SEARCH INTERACTION EXAMPLE
Search default view
On click: The last 5 search terms will be auto displayed
On click: Once 1 character is entered into search box that does not match characters in the 5 items last searched group, they will disappear (unless one or more are “favorited.
On focus: items that are “favorited” or regularly searched will appear at top of the list (functions similarly to pinning and sticky items) items can be favorited by clicking the star to the right of the item, items can be un-favorited by click the star again (yellow star = favorited, whitish/gray star = not favorited item)
On focus: search result will appear upon 2 letters being entered into search box. Letters entered in search box will result in those letters highlighted in search results
20 results will be displayed. If more then 20 results are returned, there will be a vertical scrollbar to scroll through the results
On hover: hovered item populates search box
On lost focus: when the user clicks enter or clicks on the hovered item, the search results will disappear, the hovered item will populate into the search box and the table data will be reduced to only show items that match the text in the search box
On re-entry of search box, if field was populated in that session, when the user clicks on the search box, the search will begin where it was last left off.
Clicking the “x” will clear the search box and reset the table data back to its original state
