Taking our search experience to the next level
SEEK recently released an update to our jobsearch functionality giving jobseekers the ability to better refine their search queries and hopefully discover the job of a lifetime. This design was developed iteratively involving numerous rounds and styles of user feedback to make sure we would roll out a great search experience.
Whilst the new design affords more flexibility for our jobseekers, getting it to function smoothly was deceptively complicated, and it took the combined thinking of the project’s User Experience (UX) and User Interface Development (UI Dev) teams to come up with elegant solutions to a number of UX and interaction challenges.
Creating an interface that understands user intent
Nothing is more frustrating for the end user when interacting with a hover menu, than ‘losing’ the menu flyout when you move the mouse cursor to make a selection. So, having chosen a hover interaction we were presented with a choice to prevent this frustration: employ delays (to avoid accidental interactions) or create an interface that understands the user’s intent. We chose to explore the latter option and focussed on getting the micro interactions right, testing regularly with jobseekers to create a more understanding interface.
Eliminating cumbersome corners
When conducting early Usability Testing with interactive prototypes, we noticed many users clipped the corner of adjacent refinements when moving their cursor towards an open panel. After identifying the issue through direct observation of our end users, we took a cue from the recent implementation of Amazon’s mega menu. To ensure panels don’t open accidentally, we ‘drew’ an area from the selected refine button to the top and bottom of the associated panel. Moving the cursor within this area won’t trigger adjacent panels. In this way the interface ‘understands’ that you don’t necessarily want to open an adjacent panel when you cut the corner, instead it is much more likely that you are in the process of moving the cursor to make a selection.
A step too far
Another interaction issue observed during Usability Testing saw users overshooting the edge of a panel, while eagerly moving the cursor to make a selection. To solve this issue, we worked with our UI Dev teams to build a solution to ensure the panel remains open for a short period of time when the mouse cursor overshoots the edge of a revealed panel. This short delay, while almost unnoticeable to users wanting to make the revealed panel disappear, is long enough to correct inadvertent mouse movements before the panel closes.
Eliminating accidental panel reveals
When observing users interacting with our search results pages, we saw time and again that once the page loaded, users seemingly unconsciously moved the mouse cursor ‘out of the way’ of the search results – often to the blank space on the left side of their computer screen.
One of the unintended consequences of this action occurs when the user moves their mouse cursor back into the central part of the screen to interact with the search results. In early prototypes, the action of moving the cursor from the left of the screen to make a selection resulted in the cursor travelling over the refine panel and immediately activating the refine panel flyouts. We addressed this by putting a short delay on the menu when the cursor is moving from behind (left of) the refine panel to the right. This keeps the interface feeling responsive the rest of the time, while also ensuring that incidental activation of the refine panel is kept to a minimum.
Get that mouse cursor out of the way
The unconscious mouse cursor movement seen during Usability Testing extended to other interactions also. Without realising it, many people move their cursor out of the way when typing search queries into the keywords entry field. Left unchecked this causes the keywords panel to close (right as they’re about to start typing) and users are quite often left wondering what happened.
By keeping the panel open whenever the keyword input is ‘in focus’ (i.e. the user has clicked into it) the interface behaves as expected.
What does that button really do?
Despite creating an interactive interface that refreshes the search results in the background as soon as a selection is made, we found some users still craved the completion of a ‘DONE’ button. Although the majority of users noticed the visual clues (the ‘rolling’ transition when the number of jobs updates, the temporary colour transition on the ‘active filter pills’ and the fade out/in of the search results) we observed quite a few become ‘stuck’ and needing a way to end their interaction with the refine panel.
Catering to a large user base can be a challenge (and preconceived mental models are tough to break) so we bit the bullet of compromise and included a button that essentially acts to just close the revealed panel. Interestingly, even when this was explained to users, they still relied on the button!
Providing near instant feedback on keyword searches
In a similar fashion, when using the keywords option of the refine panel, there is a pick search button that acts to both ‘execute’ the search and ‘dismiss’ the flyout. Again this button is not strictly required, as the keyword search also initiates if the user pauses for a second. This automatic execution of the keyword search upon user hesitation lets users see the effect their keyword(s) have on the results before they close the panel; making it easy to amend keywords if the results are not as expected.
Don’t be so sensitive
Another consideration when designing an interface that provides real-time updates is the potential for over sensitivity to detract from the overall experience. To avoid a strobing, rapidly-refreshing page when a series of lightening quick selections are made, we added a ‘de-bounce’ function. This catches the rapid-fire selections and executes them together at set intervals. Getting the balance right was key to creating a seamless experience… not too fast, not too slow.
Our aim with this release was to be able to provide a deceptively simple way for candidates to drill down and find the right job when using our job search. In order to deliver this we had to focus on those small interactions through multiple rounds of user feedback. This simplicity within an interface is reliant on the hidden complexity we learnt along the way through this testing and the knowledge of our UX and UI teams. The cross functional efforts from UX Designers to UI Developers enabled us to deliver a number of key features that will hopefully make it easier for jobseekers to find the opportunity of a lifetime.
Cameron Rogers is Head of User Experience and Mat Devey is a User Experience Designer in our Product team at SEEK