検索機能改善tips

kaelaela(Yuichi Maekawa)

Qiitaのプロフィール参照
@kaelaela
work@ Cyberagent

LTなので簡潔です

---

検索のちょっとした改善のお話

---

よくある改善

• 検索履歴表示
• ヒントを入れる
• 入力中に候補が絞り込まれる
• 検索結果がヒットなしのときの表示(Empty表示)
• ~して検索してみてください

---

これら以外が今日の内容(新しいことではないです)

---

見てみたアプリ

• AbemaTV
• Abema FRESH!
• Ameba
• Google Play Music
• Slack
• DroidKaigi2016(PRしてもよいでしょうか )
• Kindle
• LINE などなど

---

いつでもどこでも検索

• 常に検索バーを表示しておく
  

• 「検索結果ページ」に遷移しない(SPA)

• RecyclerViewでAdapterを交換するなど

• タブが入るとややこしい

---

検索ワードの強調

• どんな内容にヒットしたかユーザーは気になる
• HtmlクラスのfromHtmlメソッドを使い強調
• Htmlタグで消耗したくないのでシンプルに

---

即キーボード

• 検索ページに遷移したら即キーボードを出す
  • getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_ALWAYS_VISIBLE);
• 逆に検索が終わったら即キーボードを閉じる
  • getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_HIDDEN);

---

Fast Scroll

• RecyclerView-FastScroll
• RecyclerViewFastScroller (個人的にこちら)

---

Fast Scroll

• 結果の量が増えるとすぐに移動が面倒になる
• 画面の右(左)端に小さなインジケータを表示
• 検索結果が分けれるならセクションを表示

---

Tap to Top

• 一発で上にスクロール
  • RecyclerView#scrollToPosition(0)
• smoothScrollToPosition()は時間がかかる
• iOSではStatusbarのタップでリストの上に行く

---

Tap to Top

• タブがあればタップしたら上に戻す

TabLayout.OnTabSelectedListener()

@Override
public void onTabReselected(TabLayout.Tab tab) {
   TapToTopTab currentTab = (TapToTopTab) pagerAdapter.getItem(position);
   currentTab.scrollToTop();
}

• タブがないときは...？

---

Swipe to Refresh

• トレンドなど最新の情報に意味がある場合
• 同じキーワードで最新をみたいユーザーは多い
• Twitterとかみんな意味もなく引っ張る（本能）
• 公式: Adding Swipe-to-Refresh To Your App

---

まとめ

• いつでもどこでも検索
• 検索ワードのハイライト
• 即キーボード
• Fast Scroll
• Tap to Top
• Swipe to Refresh

---

thx ;-)