モバイルサイトで最もフラストレーションのたまるユーザー体験の一つとしてモーダルウィンドウが挙げられます。PCサイトでは画面サイズが大きいので、モーダルウィンドウの表示に問題はありませんが、モバイルの場合はウィンドウが（ほとんどの場合）、画面外にはみ出てしまいます。ユーザーはモーダルの一部しか閲覧できず、閉じるのにも一苦労です。
また、画面上にキーボードが表示されている場合、閲覧は更に困難となります。キーボードは画面上に大きな面積を占め、ユーザーは自分が何を入力しているのかを確認するために、いちいちスクロールする必要が出てきます。もし、モーダルウィンドウで表示されているコンテンツを快適に見せたいのであれば、モバイルでのモーダルの使用は控え、代わりにアコーディオンを使いましょう。
アコーディオンはコンテンツをページ内に納めて表示するので、モーダルのように元のページにかぶさって表示されることはありません。モーダルで起きていたウィンドウ位置の問題や、スクロールの必要性がなくなります。さらに、アコーディオンなら同じページ内に開くので、コンテキストを見失うこともありません。モーダルの場合、元の内容に覆いかぶさってしまうので、前後のコンテキストを見失うことがあります。
モーダルウィンドウとアコーディオン。後者のほうが画面表示もスクロールもモバイルに適している。
アコーディオンではユーザーがボタンをタップすると、その下部にパネルが開かれ、パネル内のコンテンツが全て表示されます。ユーザーは（モーダルのときのような）分断された画面表示や不必要なスクロールで悩むことはありません。
ボタンはタップされたかどうかわかるようにハイライトされるようにしましょう。また、パネル内ではボタンのラベルの内容と合わせたラベルをつけるといいでしょう。そしてモーダルウィンドウを閉じる時と同じように、隅には閉じるための「×」ボタンを配置しましょう。
もうモーダルウィンドウによってユーザーを苦しめるのはやめましょう。モバイルではモーダルよりもアコーディオンを使いましょう。ユーザーがコンテンツを容易に閲覧できるようになれば、よりスムーズにストレス無く、それぞれの目的を果たしやすくなります。
