設計のベストプラクティス

モバイルデバイスでのインタラクションを設計する際は、デスクトップデバイスのユーザー向けの設計とは異なる点を考慮する必要があります。画面のビューポートのサイズが異なり、ユーザーは多くの場合タッチスクリーンでコンポーネントを操作します。また、モバイルデバイスでは、デスクトップとは異なる種類のインタラクションを自然に期待します。さらに、iOS や Android など、さまざまなオペレーティングシステムでアプリケーションがどのように使用されるかにも注意する必要があります。

Workshop は、モバイルで使いやすいユーザーエクスペリエンスを提供するために、モバイルアプリケーション内のウィジェットを調整します。ただし、ユーザーがスムーズに操作できるようにする責任は、最終的には設計者にあります。このページでは、モバイルアプリケーション設計のさまざまなベストプラクティスを説明し、レイアウトやウィジェットを適切に使用するなど、Workshop で利用可能な概念を活用して、質の高いユーザーエクスペリエンスを実現する方法を詳しく紹介します。

モバイル設計では、次のベストプラクティスを推奨します。

• 折りたたみ可能なセクションを避け、ユーザーがコンテンツをスクロールできるようにする
• 大きなボタンを使用して、モバイルでタップしやすい対象にする
• 複雑なデータ入力にはドロワーを使用する
• サブページに移動して、複数ステップのインタラクションを可能にする
• ナビゲーションバーを使用してアプリケーションを拡張するか、複数のアプリケーションに分割する

スクロール可能なコンテンツを優先する

デスクトップアプリケーションでよく使われるパターンは、アプリケーションの左右に折りたたみ可能なパネル（またはサイドバー）を配置することです。これらは通常、設定可能なフィルターや、テーブルまたはリスト内の項目の詳細を表示するために使用されます。

モバイルデバイスでは、折りたたみ可能なセクションにいくつかの問題があります。セクションの表示を切り替えるコントロールを見つけてタップするのが難しい場合があります。また、通常は画面の表示領域が十分ではないため、折りたたみ可能なセクションでは自然なユーザーエクスペリエンスを提供できません。

代わりに、フローレイアウトを使用して、ユーザーがスクロールできる一連のウィジェットを表示してみてください。縦方向のスクロールは、モバイルデバイスで大量のコンテンツを表示する自然な方法です。ユーザーはウィジェットを簡単にスクロールして、必要な情報を見つけられます。

概要情報やアクションボタンを常に画面上で利用可能にしておく必要がある場合は、内部にフローを含むツールバーまたは行レイアウトを使用します。これにより、以下の例のように、特定のウィジェットを画面の上部または下部に常に表示しながら、メインコンテンツの本文をユーザーがスクロールできる状態を保持できます。

このようなページを設定する手順については、チュートリアルの Object View を作成するセクションを参照してください。

モバイルでタップしやすい対象にする

デスクトップデバイスのユーザーは、通常、マウスとキーボードでアプリケーションを操作します。マウスを使うと、ボタンやほかのコントロールを正確にクリックできます。ただし、タッチスクリーンを備えたモバイルデバイスでは、もともとデスクトップでの使用に合わせたサイズのボタンは操作しにくい場合があります。

モバイルアプリケーションにボタングループウィジェットを追加する場合は、タッチスクリーンでボタンを簡単に選択できるように、ほとんどの場合で大きいスタイルオプションを選択することを推奨します。適切な場合は、横方向の利用可能な領域いっぱいに広げるオプションも有効にして、操作対象のサイズをさらに大きくすることを推奨します。

エンドユーザーに複数のボタンの選択肢を表示する必要がある場合は、ボタングループのボタンタイプをメニューに設定します。モバイルアプリケーションでは、最上位のボタンが表示され、そのボタンを押すと下部のドロワーが開き、設定した入れ子のボタンからユーザーが1つを選択できます。

ドロワー内でのデータ入力

デスクトップアプリケーションでは、多くの場合、テキスト入力、数値入力、フィルターリストなどのウィジェットを使用して複数の入力コンポーネントを表示するための十分な画面領域があります。見た目をすっきりさせて整理するために、これらのコンポーネントを折りたたみ可能なセクション内に配置する場合もあります。

モバイルアプリケーションでは、データ入力に集中できるように、ドロワーレイアウトの使用を推奨します。これは、範囲を限定したタスクや複雑なタスクにユーザーが集中できるように、モダリティ ↗を使用するという iOS の設計ガイドラインに沿っています。

このため、モバイルの Workshop アプリケーションでは、アクションフォームが自動的にドロワー内に表示されます。ボタングループウィジェットを追加すると、そのウィジェットを選択した際に、ページ全体に広がるドロワー内に表示されます。

アクションフォーム以外でも、ユーザーが複数の情報を入力する必要がある場合は、Workshop にドロワーを追加することを検討してください。よくある例として、表示しているオブジェクトに適用する複数のフィルターをユーザーがカスタマイズする場合があります。フィルターリストウィジェットを含むドロワーを作成して、ユーザーがフィルターを設定できるようにし、そのドロワーを開くボタングループウィジェットを追加できます。

ドロワーを設定する手順については、チュートリアルのフィルタードロワーを追加するセクションを参照してください。

複数ステップのインタラクションにサブページを使用する

上記のベストプラクティスを踏まえ、ユーザーが特定のオブジェクトを調べて詳細を表示したり、アクションを実行したりする必要がある場合は、そのオブジェクトの詳細をすべて表示する新しいページを作成してください。モバイルアプリランチャーで開いた Workshop アプリケーションは、ブラウザーの進む操作と戻る操作をサポートしているため、ユーザーはサブページに移動したり、サブページから戻ったりできます。これにより、Android と iOS のどちらでも自然な操作を提供できます。

このパターンを設定するには、Workshop アプリケーション内にページを作成し、関連情報を表示するウィジェットを追加して、イベントでそのページに移動するようにします。すると、以下に示すように、エンドユーザーは Web ブラウザーを使用して最初のページに戻れるようになります。

このワークフローを作成する手順については、チュートリアルの Object View を設定するセクションの最後のステップを参照してください。

ナビゲーションバーを使ってアプリケーションを拡張する

デスクトップアプリケーションでは、タブ付きレイアウトを使って、さまざまな機能を1つのインターフェースにまとめることが一般的です。タブと折りたたみ可能なセクションを組み合わせることで、自由な分析を可能にし、画面に多くの情報を表示する、複雑でデータが豊富なインターフェースを作成できます。

通常、モバイルアプリケーションは、デスクトップアプリケーションよりも、対象ユーザーグループの具体的なニーズに合わせる必要があります。そのため、モバイルアプリケーションの各最上位ページは比較的シンプルにし、通常はオブジェクトの一覧を見て絞り込み、別のページに移動して詳細を表示し、アクションを実行するだけにとどめるべきです。

アプリケーションが複雑になり、ユーザーグループ向けの複数のワークフローを含むようになったら、モバイルナビゲーションバーを使って、ユーザーがアクセスできる複数のページを表示するようにしてください。各ナビゲーション項目から異なる最上位ページに移動できます。これらのページは通常、異なるタイプのオブジェクトを表示したり、同じオブジェクトを検索するための複数の方法を提供したりするために使われます。

たとえば、技術者向けにタスクを表示するアプリケーションでは、「自分のタスク」というタブで現在のユーザーに割り当てられたアクティブなタスクをすべて表示し、「タスク検索」という別のタブですべての技術者のタスクを検索できるようにし、最後の「履歴」というタブでユーザーが以前に完了したタスクの記録を表示できます。

ナビゲーションバーの設定方法の詳細については、ナビゲーションバーウィジェットのページを参照してください。

ナビゲーションバーは、画面下部に最大4個のタブを表示でき、サブメニューを使って追加のナビゲーション項目を表示することもできます。ただし、アプリケーションにいくつものタブがある状態になった場合は、機能を複数のアプリケーションに分割することを検討してください。ユーザーはアプリランチャーを使ってアプリケーション間を移動できます。各アプリケーションの目的を1つに絞ることで、機能をシンプルに保ち、アプリケーションのパフォーマンスを維持しやすくなります。