Webアプリでのアコーディオン-複数のオープンを許可する必要がありますか？

Question

Webアプリケーションにいくつかの長い形式があります。
アコーディオンデザインを使用してフォームの未使用スペースを節約することを考えました（フォームはすでにいくつかのセクションに分割されています）

mockup

^{download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム}

アコーディオンの各セクションを開いたときに他のセクションを折りたたむか、開いたままにした方がよいかを判断しようとしています。

ここでの最善のアプローチは何ですか？大きなフォームをデザインする方法について、別の提案はありますか？

JonW · Accepted Answer

いいえ、他を開くときに閉じないでください。

これは、プログラムでアコーディオンを閉じ始めると、画面全体があちこちにジャンプし始めるためです。

たとえば、ユーザーが例から項目4を選択した場合、画面上のそのポイントからアコーディオンが開くことを期待しますが、項目1が同時に閉じるため、新しく開いたアコーディオンは同じ場所にありません。それが開くために選択されたときでした。これは人々を狂わせるでしょう。

Roger Attrill · Answer

一般に別のセクションを開いたときに1つのセクションを閉じないことに同意します-なぜユーザーを不必要に制限するのですか？

ただし、そうすることが理にかなっている場合があります。うまく実装されていると、非常に滑らかなエクスペリエンスを提供できます。

それを機能させるには：

大きなフレームのサイズがずれることがないように、各セクションは同じサイズである必要があります。これにより、送信/適用ボタンを一定の位置に保つことができます。
セクションが開くときのスムーズなアニメーション化された遷移は、不快感を少なくすることができます-1つのセクションが他のセクションが閉じると同時に正確に開くことを可能にします。
セクションヘッダーには、タイトルに加えて、完了ステータスなどの詳細情報を表示できます。
何よりワークフローに適している必要があります。たとえば、ユーザーが次のセクションに移動するときに常に1つのセクションで作業を終了し、前のセクションを手動で閉じたい場合は、ユーザーを助けてとにかく自動で閉じても問題はありません。ユーザーが各セクションに前後のランダムアクセスを必要とする場合、これはうまく機能しません。

そのようなメカニズムのインプレースの性質は、ユーザーが展開されたコンテンツのセット全体を見る必要がないため、モバイルデバイスにも適している可能性があり、折りたたまれたヘッダーの可視性のおかげで、常にすべての概要を持っていますセクション。

明らかに多すぎるセクションはメカニズムを悪化させますが、セクションのヘッダーをスクロールしながら上から下にスクロールしていくことで軽減できます。（セクションの数をどこかに示す必要があります。）

特によくできた例は BTVisionのBBC iPlayer に実装されていますPushButton TV、（アマゾンが取得した以降）。これはフォームではありませんが、フォームと同じように機能します。

enter image description here

ここで、2番目のセクションが上に移動してサイズが小さくなり、ヘッダーの色が薄くなるのを確認できます。次のセクションが開いて、サイズが大きくなり、ヘッダーの色が薄くなるのと同期して、次のセクションとまったく同じフットプリントをとります。それが開いていたときの前のもの。

誤解しないでください。すべての状況で自動折りたたみ式アコーディオンを優先的に使用することを主張しているのではありません。 オプションは、特定のシナリオに実際に適しているかどうかを考慮せずに、さりげなく除外しないでください。

Sauce McBoss · Answer

おそらく、長い単一ページのフォームを使用します。

一般的に、私はおそらくそれらすべてをいつでも利用可能にすることをお勧めします。特定のページサイズに制限しない限り、長いページを使用しても問題ありません。（例：キオスクなどを設計している場合）。

人々はスクロールに問題はありません、そしてセクション間を長い距離スクロールしなければならないという煩わしさは、作業中のフォームがなぜ消えたのかを理解しなければならないという煩わしさよりも良いかもしれません。

ページがsuper長くなっている場合は、おそらくいくつかのナビゲーションでユーザーを追跡します。 JavaScriptまたは絶対配置のいずれかを使用します。

Lisa Tweedie · Answer

要約すると、アコーディオンはチェックアウトスタイルとして人気が高まっています。私が数年間提案してきたこと。しかし、デザインについて非常に注意深く検討する必要があるようです。

私はRogerに同意する傾向があります。よく設計されたオプションをシャットダウンすると、物事がきちんと維持されます。かなり良いデザインのハロッズチェックアウトを見てください。

また、閉じたバーを使用して、ユーザーが行った選択に関するフィードバックをユーザーに提示することで、ユーザーが別のアコーディオンセクションに戻る必要がなくなることにも同意します。