# Algoliaの『Build 201』というYoutube動画シリーズの【UI Best Practices】

AlgoliaのパリオフィスにRaph(@R4ph_T)っていうDeveloper Advocateな技術者がいて、元々は私と同じSEチームにいたけれど、コンテンツを作ってAlgoliaを広めていくっていうチームを自ら立ち上げて〜みたいな経歴の持ち主で、去年ランプアップでパリに居た時に一緒にランチしたり、去年日本でもAlgoliaとInstantSearch.jsのハンズオンをデリバーした際の👇の元ネタは彼が作ったものだったりします。

Getting Started Algolia with InstantSearch.js from Eiji Shinohara

# 6分半の動画にテンコ盛り!

最近podcast(algolia.fm)をやっていることもあってか、短い時間でビシっと説明することの難しさが身に沁みているわけですが、久し振りにRaphのビデオみたら👇スゲーな、と。

しかも、最初の方はミスったテイクで笑っちゃってる様子が紹介されてたりするし。笑

laugh

んま、ってことで、せっかくなのでこちらのブログで日本語で内容を紹介させていただこうと思います。

# UI best practices

クリーンで構造化されたデータセットがあって、しっかり設定されたインデックスがあったら、他に何が必要でしょうか？

素敵な検索UIですよね。

このビデオでは👇を題材にして検索体験をAwesomeにしていきます。

そして、このビデオをやっていることはInstantSearchライブラリで実現可能です 😃

# TIP 1. THE UNMISSABLE SEARCH BAR

検索バーは検索する際に一番大切なものなので、真ん中の目立つところにしっかり配置しましょう。

そして、何が検索出来るのかをプレースホルダーに明確に記しておくと、ユーザーは安心して検索をすることが出来ます。

# TIP 2. AS-YOU-TYPE SEARCH EXPERIENCE

いちいちエンターキーを押して検索しなくてもよいように、一文字入力するごとにright awayに検索結果を表示しましょう。検索をよりインタラクティブでダイナミックに。

# TIP 3. RESULTS INFO DENSITY

長い文章がゴチャゴチャ書かれている検索結果は見やすくないので、必要な情報がスッキリみれるようにしましょう。

# TIP 4. HIGHLIGHTING

どこでヒットしたのかハイライティングするようにしましょう。InstantSearchでAlgoliaの検索エンジンから返ってきた結果をハイライト用のCSSで見やすくしてくれます。

# TIP 5. DISPLAY SEARCHABLE ATTRIBUTES

例えばMaterialsがSearchable Attributesであるにも関わらず、画面表示されていなかったとしたら、検索した結果がハイライトされていないことになります。それだとユーザーはどこでヒットしたのか分からなくなってしまうので、Searchable Attributesは極力全て表示するようにしましょう。