UI UX アコーディオン 人間中心設計

【怒りのUI】スマホページのアコーディオンUIを考える

お久しぶりです、デザイナーのスライです。

先日Googleは「Mobile First Index（MFI）」の導入を正式にアナウンスしました。
ページの評価基準をPCページからスマホページに変更する、というものです。

スマホユーザーの増加から、モバイルフレンドリーなサイト構成は必須といえます。
今回はそんなスマホページでよく使われる、アコーディオンUIについて書こうと思います。

怒りのUI第8回目「スマホページのアコーディオンUIを考える」です。

アコーディオンUIのメリット

アコーディオンUIのメリット
例えばサンプルのようなページがあるとします。

アコーディオンUIを使用しない場合は、「プランニング」までが見えます。
一方でアコーディオンUIを使用した場合では、「アップデート」までを見ることができます。

このように、見出しのみを表示して本文を隠すことで、ページの全体像が把握し易くなります。

本を想像してみてください。

最初に目次を見て、知りたい情報がありそうなページを開くと思います。
目次が無い状態でページをめくろうとは思わないですよね。
その先に、自分が知りたい情報があるかどうか分からないのに。

WEBページにも同じことが言えます。

目次を作るという目的において、アコーディオンUIは有効と言えます。

アコーディオンUIの課題

スマホページを制作する際に役立つアコーディオンUIですが、課題はあります。
主な課題として、以下の2つが挙げられます。

  • 誤って前のページへ戻ってしまう
  • 閉じるためにトリガーまで戻らなければならない

誤って前のページへ戻ってしまう

開いたコンテンツを閉じるつもりで、ブラウザの戻るボタンを押してしまうことがあります。
開いたコンテンツをページ遷移と混同してしまっているためです。

閉じるためにトリガーまで戻らなければならない

多くのアコーディオンUIは、コンテンツを開閉させるトリガーは同一です。
つまり、コンテンツを閉じるには、開いたコンテンツ分スクロールさせる必要があります。

課題の解決方法

課題を解決するためには、以下の2つがポイントになります。

  • アコーディオンUIがページ遷移でないことを認識させる
  • コンテンツを閉じるためにスクロールする手間を省く

解決方法は単純で、閉じるボタンを追加するです。

閉じるボタンの設置例

閉じるボタンの設置例
サンプルの右側は閉じるボタンの設置例です。

閉じるボタンがあることで、閉じるためにトリガーまでスクロールする手間が省けます。
また、このコンテンツがページ遷移でないことを認識することもできます。

//アコーディオンUIの例
$(function(){
  $('.accordionTrigger').click(function(){
    $(this).next().slideToggle();
  });
});

//閉じるボタンの例
$(function(){
  $('.accordionClose').click(function(){
    $(this).parent().slideUp();
  });
});

必要最小限のアコーディオンUIですが、サンプルコードも記載しておきます。

やってみたこと

「誤って前のページへ戻ってしまう」については、トリガーをアンカーリンクにすることを考えました。
結果については、以下の点から問題の解決には繋がりませんでした。

  • ページ内遷移では、ブラウザの戻るボタンを押してもページはリロードされない
  • ブラウザの戻るボタンからイベントを取得できない

まとめ

GoogleがMFIの導入を正式にアナウンスしたことによって、
モバイルフレンドリーなページ構成はWEBサイト制作で必須となりました。

今回紹介したアコーディオンUIは、スマホサイトでのUIを向上させるために有効なものです。
しかし、それに少しの工夫を施すだけで、更に上質なUIをユーザーに届けることができます。

「もっと便利に」を常に心掛けることで、UIの向上とユーザーの高い満足度を得ることができます。

関連記事