Exploring Input Design Concepts

Goals:

• Functionality
  • the UI should increase my performance
• Useful without an introduction
  • if we need a tutorial to use a search function, we failed
• Fun to use
  • More usage equals more feedback
• Helps with the backend implementation
  • e.g only allows accepted content

Design Decisions

1. Input Form
2. Filtering Concept
3. Visualization Concept
4. Misc. Traps
5. Feedback Loop + Fun?
6. Live Demo

Input Form

Single Value Search

Natural Language

Filtering

Filtering Concepts - Drill Down

Filtering Concepts - Parallel

Filtering Concepts - Traditional

Filtering Concepts - Traditional

Auto-Complete vs. Auto-Suggest

Immersive Input/Filter

Misc. Traps

search bar / button has to be explicit

Misc. Traps

90% of queries are <27 chars long

Misc. Traps

Auto suggestion is tricky

Misc. Traps

Use placeholder in html form

Misc. Traps

Use autofocus, but no auto-highlighting on focus

https://meta.discourse.org/t/when-focus-returns-to-search-box-auto-highlight-all-text/33125/4

Misc. Traps

Search should autocorrect simple words

Misc. Traps

A loading animation distracts the user of the search time

Misc. Traps

Never return 'no results'!

Misc. Traps

Don't delete the query after the search

Feedback + Fun?

• nonintrusive feedback
  • timer (how long is this page opened)
  • which links were opened
  • what was the most searched query
• we don't want "Did you find this helpful?" in an email after several days
  • Gamification
  • Individuality

Live Demo

Sources

• UX Flows for user searches
• Designing as you type
• Search Box Best Practices
• Design a perfect search box
• Best practices for search results
• How to help users search for what they need on your site
• How to drive deep user engagement