美しい検索エクスペリエンスの設計 – 基本

原文の記事の投稿日: 2012 年 12 月 14 日 (金曜日)

皆さん、こんにちは。SharePoint 検索チームのプログラム マネージャー、Kate Dramstad です。SharePoint 2013 の検索エクスペリエンスはこれまでになく拡張性が高く、デザイナーや開発者が思いどおりにカスタマイズできるようになっています。ただし、検索エクスペリエンスをカスタマイズするときには注意が必要です。調和の取れたページになるか雑然としたページになるかは紙一重だからです。ここでは、使いやすく見た目も美しい検索エクスペリエンスの設計に関する私たちの考えの一部をご紹介します。

ページ全体の配列

私たちの検索エクスペリエンスの最も重要な要素の 1 つは、すべてのページ要素を整列させることです。既定のデザインでは、絞り込み Web パーツ (ページの左側に並べ替えのオプションを表示します) と SharePoint 検索センターのアイコン (左上隅にある虫眼鏡の画像) が左端を揃えて配置されています。検索ボックス、ナビゲーション、および結果も左端を揃えて配置されています。検索ボックスは上端をアイコンの上端に合わせて配置されており、ナビゲーションは下端をアイコンの下端に合わせて配置されています。 

図 1. 検索結果ページのすべての要素がグリッド (ここでは緑色の線で示されています) に合わせて配置されています。

 

些細なことに思われるかもしれませんが、ページの要素がグリッドに合わせて配置されていると、実際にページが見やすくなります。コンポーネントが縦と横の空白の線で明確に区切られるため、ページ上のさまざまなコンポーネントを簡単に見分けることができます。これは非常に重要なことです。きちんと整列されていないページでは、ほとんどのユーザーが "違和感" を覚えるだけでなく、結果を効率的に確認できなくなる可能性があります。コンポーネントがきちんと整列されていないと、端がでこぼこになるため、視線がきょろきょろするからです。視線が直線的に進む方がはるかに効率的です。 

図 2. この画像では、検索アイコンが左に移動してグリッドからずれています。

 

洗練されたエクスペリエンスを実現するためには、ページに新しいコンポーネントを追加するときや、既存のコンポーネントの配列を変更するときに、このグリッドを念頭に置くことが重要です。 

図 3. ここでは、インライン結果に変更を加えて、星評価の機能といくつかのメタデータを追加しています。追加された機能もグリッドに合わせて配置されています。

 

ページ全体の外観

重要なのは配列だけではありません。ページ上の色、フォント、およびリッチ コントロールの数にも注意を払う必要があります。検索結果ページの焦点は、ほとんど常に、検索結果そのものになります。したがって、結果ページのコンポーネントのスタイルを指定する際には、ユーザーの注意を結果からそらさないようにする必要があります。そのためのヒントを以下に示します。

できるだけ一般的な配色を使う

たとえば、検索結果では、クリックできる結果タイトルには青、結果の URL には緑を使うのが一般的です。この慣習に従わないと、ページを見るときにユーザーがより多くのことを考えなければならなくなります。 

図 4. タイトルと URL の色を入れ替えるとユーザーが混乱する可能性があります。一般的な慣習に沿った色を使うように心がけてください。

 

使う色をできるだけ減らす

色は、選択されたフィルター オプション、結果タイトル、URL など、重要なものを目立たせるために使われるのが一般的です。色の数が多すぎると、かえってどこに注目すればよいのかわかりにくくなります。ただカラフルなだけのページでは、結局は何も目立たなくなってしまいます。 

図 5. 色数が多すぎると煩雑になり、どこを見ればよいのか、何が重要なのかがわかりにくくなります。UI で使う色の数を制限してください。

 

使う書体やフォント サイズをできるだけ減らす

フォント、フォント サイズ、太字や斜体などは、色と同じように、重要な要素を目立たせるために使われます。色の場合と同様に、使うスタイルやフォントが多すぎると、全体が雑然とした印象になります。私たちの製品チームでは、これをよく "脅迫状" と呼んでいます。さまざまな雑誌の切り抜きを継ぎ合わせたように見えるからです。

リッチ コントロールの外観をできるだけシンプルにする

図 6 の "更新日" という見出しの下にある日付フィルターのヒストグラムの絞り込み条件を見てください。当初、この絞り込み条件を既定のページに配置するのは危険でした。見た目が複雑なので、テキスト ベースのフィルターに比べて目立つ可能性があったからです。そのため、ページのその他の部分に色を合わせて、形と線をシンプルにしました。カスタム コントロールを追加するときには、これと同じようにすることが重要です。

円グラフのフィルターでは、いろいろと試してみました。まず、図 6 を見てください。この絞り込み条件は煩雑です。 

図 6. この円グラフのカスタム フィルターは、使われている色が多すぎるし、他のコントロールのスタイルとも調和していません。これでは煩雑です。

 

次に、図 7 を見てください。配色と形をシンプルにするとどうなるのかがわかります。 

図 7. 既に UI で使われている色を使い、他のコントロールとスタイルを合わせることにより、この円グラフの絞り込み条件は、ユーザーの注意を適度に引き付けるようになりました。作業のじゃまになることはありません。

 

ページの概念的な区分

検索エクスペリエンスを設計するときには、美的な詳細と概念的な詳細の両方を考慮に入れる必要があります。私たちは、一般的な検索の慣習と独自の調査に基づいて、ページのコンポーネントを機能とユーザー操作モデルに基づく複数の領域にまとめています。コンポーネントを追加したり再配置したりするときには、この概念的な区分を維持することをお勧めします。そうしないと、ユーザーが、目的の機能がどこにあるのかわからなくなる可能性があります。

たとえば、フィルター操作はすべて検索結果ページの左側にあるため、ユーザーが結果セットをフィルター処理するときに迷うことはありません。ページに新しいフィルターを追加するときには、ユーザーがすぐに見つけられるように、他のフィルターの横に追加することをお勧めします。

図 8 は、既定の検索結果ページの概念的な区分の概要を示しています。 

図 8. 検索結果ページは 5 つの機能領域に分割されています。このページをカスタマイズするときには、新しい要素を対応する機能領域に追加するようにしてください。

 

ここでは、美しい検索エクスペリエンスを作るための大まかなガイドラインの例をいくつか紹介しました。皆様からのご意見、ご質問をお待ちしております。

 

これはローカライズされたブログ投稿です。原文の記事は、「Designing a beautiful search experience – The basics」をご覧ください。