私は仕事関連のユーザーを登録するWebアプリのUIの再設計に取り組んでいます(そのため、私の聴衆は虜になっています)。再設計の主な理由の1つは、モバイルフレンドリーにすることです。スマートフォンやタブレットだけでなく、デスクトップでも機能する必要があります。
私が行き詰まっている場所は二次ナビゲーションです。現在、登録フォームは複数のステップに分かれていますが、かなり長いもの(1ページに30以上の入力がある)であるため、さらに多くのステップに分割する予定です。古いバージョンでは、ユーザーがフォームをステップスルーするときに上部にパンくずが表示され、既に完了しているが前のページには戻れません。
私が失いたくないブレッドクラムアプローチの利点の1つは、プロセスのどこにいるのかをユーザーに知らせることです。画面の数が増えると、ステップのリストが長くなりすぎるのではないかと心配しています。また、モバイルデバイス、特にタッチスクリーンでのブレッドクラムの使用についても懸念しています。
ブレッドクラムはまだ有効なオプションですか?彼らはモバイル/タッチスクリーンの分野でまったく意味がありますか?そうでない場合、他にどのようなオプションが理にかなっていますか?
編集-これが私の解決策の最初のドラフトです:
タッチスクリーンUXは非常に興味深い分野です。タッチパネルの品質、パネルのタイプ(抵抗対容量対赤外線など)、UIをマルチタッチでズームできるかどうか、UIが実行するデバイスの種類を実際に考慮する必要がありますオン(iPadのみ?モバイルタブレット?キオスク?タブレットとデスクトップブラウザー)。
私がこれに対して持っている最良の解決策は、垂直ブレッドクラムです。これが、ユーザビリティテストである程度成功した、以前の方法です。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
側面にあるナビゲーションアイテムは、指で簡単にターゲットを設定できる大きさである必要があることに注意してください(標準のDPIで40ピクセルの正方形は、タブレットや携帯電話などの高品質のタッチパネルでの経験則の最小値です)。抵抗膜方式のタッチパネルでは少し小さくなり、標準のSAWまたはPCTキオスクタッチパネルでははるかに大きくする必要があります)。
このUIは、インターフェイスのマルチタッチズームを有効にしないことも想定していることにも注意してください。これは問題になる場合があります。
最近のコメントが示唆しているように、インターフェースにズームインできるようにする必要がある場合は、より伝統的なブレッドクラムトレイル(指で簡単にターゲティングできるように少しだけ変更)を効果的に使用できます(ただし、これによりステップ数が多少制限される場合があります) ;とにかくやるべきこと):
さらにいくつかのアイデア:
1.アコーディオンスタイルウィザード;各ステップで[完了]をクリックすると、ユーザーは次のセクションに進みます。セクションヘッダーは常に表示され、ステータスをクリックすると、ヘッダーをクリックしてセクションを編集できます。欠点はスクロールです。
2.ユーザーは、ウィザードのステップと進行状況をロールアップするコントロールをクリックできます。
ブレッドクラムはモバイルで使用される通常のパターンではなく、ページタイトルとページ数によっては、このリストが画面上で非常に大きくなる場合があります。あなたが尋ねるべき質問は-
あなたが仕事に関連したものの虜になっているので、私は前のページに戻る画面の上部にある「戻る」ボタンを持っているでしょう。また、「Step 2 of 5」などの単純な進行状況インジケーターを含めて、ユーザーがプロセスのどこまで進んでいるかを知ることもできます。
他の人が述べているように、パンくずリストはモバイルでは素晴らしい体験にはなりません。プロセスのいずれかのステップに戻ることができることが本当に重要である場合は、現在のステップを表示し、以前のステップのリストを提供するメニューを表示することをお勧めします。
ジャンプして次のステップを確認することがそれほど重要でない場合は、現在のステップに戻るためのコントロールと次のコントロールを表示するだけでなく、同僚が提案した進行状況バーなどの指示を表示して、人々がどこにいるのかを感じ取れるようにします処理する。