デザインのベストプラクティス

モバイルデバイス上でのインタラクションの設計は、デスクトップデバイス上のユーザー向けのそれとは異なる一連の配慮を必要とします。画面のビューポートは異なるサイズで、ユーザーはおそらくタッチスクリーンを使ってコンポーネントと対話するでしょうし、ユーザーはモバイルデバイス上で異なるタイプのインタラクションを暗黙のうちに期待しています。さらに、iOS や Android など、さまざまなオペレーティングシステムでアプリケーションがどのように使用されるかを考慮するべきです。

Workshop はモバイルアプリケーション内のウィジェットをカスタマイズしてモバイルフレンドリーなユーザーエクスペリエンスを提供しようと試みますが、ユーザーにスムーズなエクスペリエンスを提供する責任は最終的にはユーザー自身にあります。このページでは、モバイルアプリケーションデザインのベストプラクティスの範囲を説明し、Workshop で利用可能なコンセプトを使用して高品質のユーザーエクスペリエンスを実現する方法を詳述しています。これには、LayoutsやWidgetsを適切に使用することが含まれます。

モバイルデザインのための以下のベストプラクティスを推奨します：

• 折りたたみ可能なセクションの使用を避け、ユーザーがコンテンツをスクロールすることを優先させる
• モバイルフレンドリーなタップターゲットを確保するために大きなボタンを使用する
• 複雑なデータ入力にはドロワーを使用する
• 複数ステップのインタラクションを可能にするためにサブページに移動する
• アプリケーションをナビゲーションバーを使用してスケールする、または複数のアプリケーションに分割する

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

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

折りたたみ可能なセクションは、モバイルデバイス上でいくつかの理由から問題となります。セクションをトグルするコントロールを見つけてタップするのが難しく、通常、折りたたみ可能なセクションが自然なユーザーエクスペリエンスを提供するための十分な画面の不動産がありません。

代わりに、ユーザーがスクロールできる一連のウィジェットを表示するために Flow layout を使用してみてください。垂直スクロールは、モバイルデバイス上で大量のコンテンツを表示する自然な方法で、ユーザーは簡単にウィジェットの範囲をスクロールして必要な情報を見つけることができます。

要約情報やアクションボタンを常に画面上に表示しておく必要がある場合は、Flow を含む Toolbar または Rows レイアウトを使用してください。これにより、一部のウィジェットを画面の上部または下部に常に表示しながら、ユーザーがコンテンツの本文をスクロールする能力を保持することができます。以下の例のようにです。

このようなページを設定するステップバイステップガイドについては、オブジェクトビューの作成に関するチュートリアルセクションを参照してください。

モバイルフレンドリーなタップターゲットを確保する

デスクトップデバイス上のユーザーは通常、マウスとキーボードを使用してアプリケーションと対話します。マウスを使用すると、ユーザーはボタンや他のコントロールを精度良くクリックすることができます。しかし、タッチスクリーンを持つモバイルデバイス上では、ユーザーはデスクトップで使用するために元々サイズ設定されていたボタンと対話するのに苦労する可能性があります。

モバイルアプリケーションに Button Group ウィジェットを追加する際、ほとんどの場合、Large style オプションを選択して、ボタンがタッチスクリーンで簡単に選択できるようにすることを推奨します。適切な場合は、Fill available horizontal space オプションを有効にして、コントロールターゲットのサイズをさらに大きくします。

エンドユーザーに対して複数のボタンオプションを表示する必要がある場合は、Button Group をメニューボタンタイプに設定します。モバイルアプリケーションでは、これにより、ユーザーがネストしたボタンのいずれかを選択するために下部のドロワーを開くトップレベルのボタンが表示されます。

ドロワー内のデータ入力

デスクトップアプリケーションでは、多くの画面の不動産が利用可能で、Text input、Numeric input、または Filter list などのウィジェットを使用して複数の入力コンポーネントを表示することがよくあります。時々、これらのコンポーネントは清潔さと組織化のために折りたたみ可能なセクション内にネストされます。

モバイルアプリケーションでは、drawer レイアウトを使用して、集中的なデータ入力体験を提供することを推奨します。これは、modalityを使用してユーザーがスコープを持った複雑なタスクに焦点を当てることをiOSのデザインガイドラインに準拠しています。

モバイルの Workshop アプリケーションはこの理由から、自動的にアクションフォームをドロワー内に表示します。Button Group widget を追加すると、選択したときにフルページのドロワーに表示されます。

アクションフォームの他に、ユーザーが複数の情報を入力する必要があるときは、Workshop にドロワーを追加することを検討するべきです。一般的な例は、ユーザーが見ているオブジェクトのセットに適用する複数のフィルターをカスタマイズする必要があるときです。フィルターリストウィジェットを含むドロワーを作成して、ユーザーがフィルターを設定できるようにし、ドロワーを開く Button Group ウィジェットを追加します。

ドロワーの設定方法についてのステップバイステップガイドについては、フィルタードロワーの追加に関するチュートリアルセクションを参照してください。

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

上述のベストプラクティスに基づき、ユーザーが特定のオブジェクトを調査して詳細を表示したりアクションを取ったりする必要がある場合、オブジェクトの全詳細を表示する新しいpageを作成するべきです。mobile app launcherで開かれた Workshop アプリケーションは、ユーザーがサブページに入ったり出たりするためのブラウザレベルの前進と後退のインタラクションをサポートし、これにより Android と iOS の両方で自然な体験が提供されます。

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

このワークフローを作成するステップバイステップガイドについては、オブジェクトビューの設定に関するチュートリアルセクションの最後のステップを参照してください。

ナビゲーションバーを使用してアプリケーションをスケールする

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

モバイルアプリケーションは通常、デスクトップアプリケーションよりもターゲットユーザーグループの具体的なニーズに合わせて作成する必要があります。その結果、モバイルアプリケーションの各トップレベルのページは比較的シンプルで、通常はユーザーが一連のオブジェクトを閲覧してフィルタリングし、詳細を表示してアクションを取るための別のページに移動することだけを可能にします。

アプリケーションがより複雑になり、ユーザーグループに対して複数のワークフローを含むようになった場合、ユーザーがアクセスできる複数のページを表示するために Mobile Navigation Bar を使用するべきです。各ナビゲーションアイテムはユーザーを異なるトップレベルのページに移動させることができ、通常は異なるタイプのオブジェクトを表示するか、同じオブジェクトセットを検索する複数の方法を提供するために使用されます。

例えば、技術者向けのタスクを提供するためのアプリケーションでは、"My tasks" と呼ばれるタブが現在のユーザーに割り当てられたすべてのアクティブタスクを表示し、"Task search" と呼ばれる別のタブがすべての技術者のタスクを検索するための機能を提供し、最後の "History" と呼ばれるタブがユーザーが以前に完了したタスクの記録を表示することができます。

Navigation Bar の設定方法についての詳細は、Navigation Bar Widget ページを参照してください。

Navigation Bar は、画面の下部に最大4つのタブを表示することができ、サブメニューを使用して追加のナビゲーションアイテムを表示することができます。しかし、アプリケーションがいくつかのタブを持つ点に達した場合、この機能を複数のアプリケーションに分割することを考慮するべきです。ユーザーは app launcher を使用してアプリケーション間を移動でき、各アプリケーションが単一の、特定の目的を持つことで機能をシンプルに保ち、アプリケーションがパフォーマントであることを確保するのに役立ちます。