CIS 376 — Interface Improvement

Fixing Tiny Mobile Search Boxes

User story: As a mobile user, I want a larger, smarter search box so that I can edit my search terms with fewer taps and less time.

Problem: Tiny Text Input

Many mobile browsers and shopping apps use a very small search input at the top of the screen. When the text is long, it is hard to tap and edit specific words.

  • Small tap target for placing the cursor
  • Hard to correct typos in the middle of the phrase
  • Requires several taps / long-press to select and delete words
Screenshot of a tiny mobile search input
Example of the “before” design: long text inside a tiny search field.

Baseline test case: Editing 3 words in a long query can easily take 8–12 taps in this design.

Solution: Bubble Search Prototype

This prototype turns each search term into a tap-able bubble. Users can quickly add, remove, or toggle words without carefully placing the cursor.

  • Full-width, tall search bar for easier typing
  • Search terms become bubbles you can tap to activate/deactivate
  • Clear visual state: active vs. muted bubbles
  • Console logs clicks and time for each search run

Success metric: For the same edit task, the bubble interface should require fewer taps and less time than the baseline.

Interactive Prototype

Type a search phrase, press Create Bubbles, and then tap the bubbles to include or exclude terms. Finally, press Run Search. The app records your clicks and time in the console.

Tip: Try a long phrase, then remove or toggle a few words using the bubbles.

Search terms as bubbles

Ready. Open DevTools console to see click count and timings.

Metrics & Testing
  • Every tap on a bubble or button increases the click counter.
  • Timer starts on first interaction and stops when you press Run Search.
  • Results are logged using a metrics module and stored (when possible) in localStorage.

Example console output: 


Run 3 — 9 clicks in 11.2s (active terms: "used, delica, diesel")