February 26, 2018

Building front doors into search experiences

Search ingress

“If opportunity doesn’t knock, build a door.”

After collaborating with a few teams of developers on QF and Header projects, we became more comfortable bouncing random ideas off one another. The first one was an affordance to get back to the search box once you scroll down past the header (and the search box is out of the canvas). Material design calls this thing the floating action button—we called it “FAB” at first, then landed on “Quick actions.”

We could have solved this issue with a sticky header but the consensus was that model was a bit heavy-handed. We also had some other secondary issues lingering, like making it easier for people to login, change their settings, click on Related searches, as well as having a plan for multi-modal input selection. So, I sketched out a few interaction models—from mild to wild, as they say.

Mobile Quick Actions

A. Single action

  1. Scroll to TOP of page, then open QF. Could be frustrating on accidental tap.
  2. Open QF, keep context.

This one was the quickest one to build, test, and deploy—so this is the one that shipped.

B. Menu (Simple)

  1. Like most menus, there should be a semantic grouping: Inputs like camera, mic, keyboard and Account management like login, saves, history, etc.
  2. Possible “tension” or confusion with Hamburger menu
  3. Confusion with 2 inputs, 1 account button
  4. With or without action labels
  5. Awkward integration of Related searches (mixed Quick actions, difference affordance for Related searches)

This model was flawed due to the lack of a semantic organization, lending itself to a somewhat random collection of links (reminiscent of a hamburger menu “kitchen drawer” metaphor)

C. Menu (System)

  1. Semantic grouping (Input, Account, Related searches)

  2. Flexible system—build Input card first, then Related searches, Account

  3. Possible to get rid of menu (hamburger) and use this exclusively

I lobbied for this model. I was interested in taking some of the weight off the Header's menu controls, making them more accessible both in terms of speed and proximity to your thumb while holding the phone. However, there was apprehension regarding the novelty as well as perceived complexity, so we went with the Single action (A).

Quick action in action

Sidekick app for Android

The team—ahem, Rahul—had another idea for an always-on search experience for Android. The interaction was akin to the Facebook chat heads UI. I put together the interface with much of the learning from Query formulation and the Mobile header re-design projects. Shuai built a functioning prototype and we all had a good time testing it out for a bit. It’s worth noting that I was insisting on calling it Bing Up for some reason. I’m really glad Rahul pulled rank and called it Sidekick, heh.

In the end, Sidekick didn’t ship but it was supercool how we came together as a small, scrappy team and built something clever. If you’re into this sort of thing, check out Microsoft Launcherwhich has this functionality and a lot more (including a better name).

* * *