The goal is for a user to quickly search a set of data with 2 tiers of structure and select an item from the second. In this case it was to search a set of data comprised of a set of 'Clients' and within each set is a set of 'Users' (for that client). The terminology gets a little confusing from here onwards regarding what a 'User' is, if I mean the person using the application I will say 'end user' and 'User' refers to the items in the second tier of data that is searched.
I didn't want the solution to be bespoke or for a single use, instead I wanted to design something that would scale well and serve as a pattern that could be adapted to work in new contexts.
There was already some design work done, which included, some visual design, placement of the search box and results and an area of the app that the search would inhabit.
About the end users
Sales traders sell foreign exchange in a fast paced environment and deal with huge amounts of money over the phone on a minuet by minuet basis. They favour keyboard interaction over mouse input for its speed and accuracy.
- Select the person (User) that I am currently on the phone talking to.
- Select any person (User) at the organisation (Client) the person I am on the phone with works for.
- Select the organisation (Client) the person I am on the phone with works for.
Before creating this document there was a lot of sketching and discussion with developers and product owners who had at this stage spent significant time with potential end users of the piece.
Drawing diagrams like this help me think. I see them as a interaction design tool, they also help developers plan the code. I find they are not very useful in a presentation scenario.
1. Hotkey: / + Enter puts the search field in focus
2. Blue lines to indicate focus
3. Search text greyed out (@st-grey-3)
4. Clear button to clear the search input in one click
5. Feedback area to show: How many results where found, if NO results where found, an Error or loading
5.1. How many results:
5.2. No Results:
no results found for <entered string>
5.3. Error: Unable to complete Search
5.4. Loading: small loading gif as per ticket
6. Underline matching characters in results
7. Hoverstate for mouse hover
8. Hoverstate for keyboard select
9. Selected item
10. Show More area
This icon is to clear down the search field.
The importance of drawing vectors to your chosen crisp size becomes relevant below 16px. Drawing the icon at 11px instead of 12px ensures certain (pink) pixels are completely filled instead of anti-aliased to give the cross more definition.
One of the last things to change during the iterations and feedback cycles was to change the hotkey to 's' instead of a combination of two other keys. Below is the search function in relation to the rest of the app but the details of this design could change and the interaction design at the core would remain the same.