固定された要素をデザインするベストプラクティス | アドビUX道場 #UXDojo
エクスペリエンスデザインの基礎知識
Adobe XDが更新されて、デザイン要素の位置を固定できるようになりました。この機会に、スティッキーヘッダや他の固定要素のベストプラクティスを探ってみましょう。
固定要素は巷に溢れ、実装するのも容易です。しかし、それが本当に達成しようとしているものは何でしょうか？何名かの業界をリードするデザイナーや開発者に、固定要素の使い方について、アドバイスを聞いてみました。
すべきこと
- ユーザーに価値を与えるアクションや要素だけに限定すること。「できる」と「すべき」は別の話
- ブレークポイントごと、要素の最も効果的な位置を検討する
- タップするのに十分な大きさを確保する
- スペースを効果的に使う
- 固定要素が、その下のコンテンツから明確に区別できるよう、十分なコントラストを確保する
- 大きさに気をつける。画面が小さいほど固定要素は邪魔になりやすい。固定ヘッダであれば1行のテキストが収まる高さが望ましい。見て欲しいのはコンテンツであってヘッダではない。
- 特にモバイルでは、下にスクロールするときはヘッダを隠すことを検討すべき。その分、読むためのスペースを与えられる。上にスクロールしたらヘッダを表示する
すべきでないこと
- 必要が無い要素を固定しない。ユーザーに与えるメリットは殆どなくても、画面の大事な領域を浪費する
- モバイルでは、固定要素に縦100px以上与えない
- ユーザーの目線に、連続して邪魔なアニメーションやトランジションを表示しない
- 画面をスクロールさせないように、ユーザーのデスクトップ画面よりも大きな固定要素をデザインしたりしない
コンテンツが主役であること
Capital Oneのエクスペリエンスデザインディレクターダニエル・フィラーによると、ユーザーが解決しようとしている課題が、デザイナーが理解すべき最も重要なことです。2番目は、ユーザーがその課題に出会う状況です。ここで固定要素は重要な役目を果たすことがあります。
「固定されたヘッダや何らかのコンポーネントは、ユーザーに状況を明確に示すためのツールです」とダニエルは言います。彼のサイトは、最近「12 Fixed Sticky Navbars That’ll Grab Your Attention（注目されやすい12の固定ナビゲーションバー）」という記事を掲載しました。
「高速道路の標識、あるいは掲示板のようなものだと考えてみてましょう。状況に応じた十分な情報を提供したり、アクションへの誘導により顧客の運転を助け、道を示すのです」
また、ダニエルは、デザインの対象となるデバイスが増加し、既に過剰な画面解像度やサイズの種類がさらに増え続ける中、固定要素は、状況を示す情報やアクションの視認性を、画面サイズに関わらず保障できると主張します。
“Of course, with great power comes great responsibility,” he warns. “I’d ensure you’re providing visibility to these blocks in a manner that aligns with your customer’s unique needs, not just that of the business. Sure, it’s important the business meets its goals, but not at the expense of our customer experience — that just propagates dark patterns.”
「そして、力には責任が伴います。それぞれの要素が、ビジネス側の都合だけでなく、個別のユーザーのニーズに沿った形で表示されていることを確認すべきです。ビジネス目標の達成が重要なのは当然ですが、顧客体験を犠牲にすべきではありません。デザインのダークパターンが増えるだけです」
要素の固定は必須なのか？
シンガポールのフリーランス開発者でありフロントエンドのコンサルタントでもあるゼル・リウのアドバイスは次のようのものです。「固定要素が必須かどうかを判断しましょう。通常、固定要素はコンテンツと場所を取り合います。コンテンツ主体のサイトであれば、固定要素は避けた方が無難です」
「ですが、固定要素は大きな役に立つことがあります。固定要素で興味深いアニメーションをつくることもできます。2015.devfest.asiaはその良い例です。下にスクロールするとイベントの日程が固定ヘッダになります。このケースでは、ナビゲーションを支援するために必須と言えるでしょう」
DevFest.Asiaのサイト。ゼルがデザインと開発を行い、日付の表示に固定ヘッダを使用した
eコマースやサービスサイトにおける固定要素の例
UI要素を固定するのは、ページ内のどこからでも、ユーザーが主要なアクションや情報に確実にアクセスできる優れた手法であると、UXエージェンシーNatural Interactionのマネージングディレクターアダム・ババジー-パイクロフトは指摘しています。
eコマース
「アマゾンと差別化するために、ネット上の専門店は、より優れた製品を提供して対抗しようとする場合があります。その場合、顧客の経験や知識レベルによって、購入させるための説得も異なるレベルが必要になるかもしれません。そうした追加コンテンツは、長いページを構成することになりがちです」とアダムは言います。
ここで固定要素が登場します。「固定したUIから、カートへの追加、商品数の変更、チェックアウトが素早く行えます。つまり、ユーザーは決断した瞬間に行動できるわけです。eコマースでは、製品カテゴリーや検索結果のページで、コンテンツをソートしたりフィルターするオプションの表示に使うのも良いでしょう。これは、ユーザーが選択済みのオプションを確認するのに役立ちます」
サービスサイト
Webベースのソフトウェアでも固定要素は使われます。アプリケーションを使うユーザーなら誰でも、特定のアクションを実行したくなることがしばしばあるでしょう。
「”保存”や”新規作成”ボタンがその例です。例えばSolverboardやJiraでは、常に表示されている”New”ボタンをクリックすれば、新しいアイデアやチケットをつくれます」とアダムは例を挙げました。
ケーススタディ：Creditcallサイトの固定ナビゲーション
ペイメントテクノロジー企業Creditcallはすべてのデジタルマーケティングアセットを社内で制作し管理しています。デジタル部門トップのニック・クラークソンは、最近チームがユーザビリティ監査を行い、Creditcallのサイトに固定ヘッダを実装することになった時の話をしてくれました。
調査の結果は、チームが考えていた固定ヘッダの利点を再確認するものでした。
- 案内役のナビゲーションの位置として適しており、一目で分かる
- スクロール中も、スクロール後も、ナビゲーションや検索などの機能にすぐアクセスできる
Creditcallが固定ヘッダを採用した理由のひとつは、ユーザーが見慣れた機能を使いやすいと感じたからです。
ニックは言います。「固定ヘッダはテストで好評でした。データによれば、静的なナビゲーションよりも最大25％短縮されました。理由のひとつは、いまどきのページの長さです。われわれのサイトにはありませんが、最近良く見られる無限スクロールのページに固定ヘッダが無ければ、静的なヘッダまでずっとスクロールして戻らなければなりません。そのとき、「トップに戻る」矢印がコンテンツの上に置かれていたら嬉しいでしょう。しかし、それは余分なクリックを必要とします。私は間違いなく自分で使った以上の回数それを実装しました」
おわりに
この記事に協力してくれた、ダニエル、ゼル、アダム、ニックに感謝します。以下は、もっと勉強したい人のためのオススメの記事です。
- The 3 Golden Rules of Sticky Navigation
- Sticky Headers(1/3)、Smooth Scroll & Sticky Navigation(2/3)、CSS Sticky Nav & Smooth Scroll(3/3)
- 12 Fixed Sticky Navbars That’ll Grab Your Attention
- An Event for CSS position:sticky
- Easier Scrollytelling With Position Sticky
これまで紹介したように、デスクトップやモバイル環境でページの長さが大きく異なる状況では、固定要素が役立ちます。ユーザーは見慣れた機能を使いやすく感じますが、注意すべきルールもあります。それらを念頭に、効果的な固定要素をデザインしましょう。常にビジネスとユーザーの両方に配慮して、固定要素の必要性を考えましょう。そしてAdobe XDを使って、固定要素をデザインしてみましょう。
この記事はBest Practices for Designing Fixed Elements（著者:Oliver Lindberg）の抄訳です