Prototyping and Building a Task Search Interface

One of the major pain points we had in EHQ Admin was the navigation. Adding/editing a tool or a widget was a pain. As more and more features were built into the app, it just became harder to get to certain common tasks. While this step by step navigation worked for most of our users, there was a large section of power users who wanted more, who wanted to get things done even faster. 

04 - keydates-add-2.png

EHQ Admin

ADDING AN ENTRY IN THE KEY DATES TOOL 

In the example above, for an admin to add an entry in the Keydates tool,

  1. He needs to navigate to the specific project, 
  2. Go to the Information section
  3. Go to Key Dates section
  4. Click on Add New Key Date

These four steps work perfectly for the end user, but we wanted to create a shortcut for the power users to reach the exact tool in much lesser steps. 

This was a nice-to-have feature, an easter-egg, and not a necessity. Hence we decided to work on this project on the 'Road Map Not Taken' aka RMNT day. This is one day in every month where we ignore the roadmap and do any project from the backlog we like.

Observation & Interviews

First thing we did was to identify and study our target users. What are the tools they use in EHQ, How they navigate to a tool/widget and add them. We set up a demo site and asked people to create a website from scratch. We observed the user behaviour using heatmap and click monitoring tools. Most of them did follow the multi-step process to add/edit entries in the feedback tools but also admitted that if there was a shortcut to get to where they wanted to, it would’ve been helpful

Having shortcuts listed in the site was a horrible idea. Since this itself would become a long, un-trackable list of links. Searchable list seemed like a good idea but placing it near a widget would make it just another widget, because we had sidebar widgets. We wanted something which would be accessible site-wide.

Brainstorming & Prototyping

We looked at a lot of tools which use the search interface for power users.

I love GitHub’s find files interface (which incorporated the programmer-intuitive ⌘+T onto its web interface).

github.jpg

Made popular by Textmate, the Command/Control + T Go-To-File has been in use by programmers since years. Here’s a screenshot from Sublime Text’s ⌘+T interface: 

Sublime Text's ⌘+T Interface Screenshot

Sublime Text's ⌘+T Interface Screenshot

Another awesome feature which caught my eye was Atlassian Jira’s Dot ‘.’ and Comma ‘,’ Shortcuts which pops out a search box and common tasks which lets you type a task.

jira.jpg

We brainstormed on the idea and came up with tons of features to be incorporated. It had the capability for switching between projects, adding, editing deleting stuff, manage settings etc. 

adminsearch.jpg
adminsearch.png

This was one of the discarded designs after we found that the lightbox interface takes the user out of the context. Besides, lightboxes are known to hinder accessibility. After a few iterations, we came up with the following design.

adminsearch1 (1).jpg

This worked great for our power users, and we iterated on this design. 

Subsequently, we implemented the design, code and JavaScript. Some time later, we made a jQuery plugin out of the tool and added keyboard shortcuts. Watch the video to take a look at how this works! 

Rahul M. Hareendran