FRMSKI開発ブログ

プログラミング、UI / UX、仕事、読書のことなど、日々の記録を綴ります

Human Interface Guidelines(14) - User Interaction / Drag and Drop 和訳&まとめ

iOSのHuman Interface Guidelines、User Interaction / Drag and Dropについての和訳です。

Drag and Drop

 単一の指で、ユーザは、選択された写真、テキスト、または他のコンテンツを、ある場所から別の場所にドラッグして移動したり複製したりすることができます。

 選択したコンテンツをタッチして保持すると、それが上昇してユーザーの指に付着しているように見えます。コンテンツがドラッグされると、アニメーションや視覚的な手がかりによって可能な宛先が識別されます。ドロップが不可能な場合、またはコンテンツを移動するのではなく複製する場合はバッジが表示されます。開発者向けのガイダンスについては、UIKitのドラッグアンドドロップDrag and Drop | Apple Developer Documentation)を参照してください。

ソースと目的地

 ドラッグアンドドロップでは、選択したコンテンツをソースの場所から目的地に移動します。これらの場所は、テキストビューのような同じコンテナ内にも、スプリットビューの反対側にあるテキストビューのような異なるコンテナ内にも置くことができます。たとえば、Notesでは、選択したテキストを同じノート内の新しい場所にドラッグできます。リマインダーでは、ユーザーは個々のリマインダーを1つのリストからドラッグして別のリストにドロップできます。

 iPadでは、送信元と送信先の場所が異なるアプリにも存在するため、Safariのウェブページの写真をMailの新しいメッセージにドラッグするなどのアプリケーション間のやりとりが可能です。コンテンツをドラッグしている間、ユーザーはマルチタスキング、ホーム画面、または画面の下からスワイプしてDockを表示することで、別のアプリにアクセスできます。

【NOTE】アプリケーション間でコンテンツをドラッグアンドドロップすると、コンテンツの移動ではなく重複が常に発生します。

ドラッグアンドドロップをサポートする

 ドラッグアンドドロップは、効率的で直観的な機能であり、ユーザーがシステム全体に広範囲に実装することを期待しています。あなたのアプリがテキスト、写真、ビデオ、オーディオ、または移動、コピー、または挿入したいかもしれない他のコンテンツを含んでいる場合、あなたのアプリはドラッグアンドドロップをサポートする必要があります。

  • 選択可能で編集可能なすべてのコンテンツに対して、ドラッグ&ドロップを使用できるようにします
     選択可能なコンテンツはドラッグ可能でなければならず、編集可能なコンテンツは削除されたコンテンツを受け入れるべきです。また、アプリがこれらの領域にコピー&ペーストをサポートしていることを確認してください。

  • 該当する場合、コントロールにコンテンツをドロップすることを許可します
     一般に、テキストフィールドなどのデータの入力や選択が、ドロップされたコンテンツを受け入れるようにするコントロールを構成します。

  • 可能であれば、標準のテキストビューとテキストフィールドを使用してください
     これらのシステム提供要素には、ドラッグアンドドロップの組み込みサポートが含まれています。

  • 効率を高めるには、複数項目のドラッグアンドドロップをサポートすることを検討してください
     多くのアプリでは、ユーザーは1本の指で1つのアイテムをドラッグし、ドラッグしている間に別の指でタップして追加のアイテムを選択できます。選択した項目が一緒に移動し、元の項目をドラッグしている指の下に積み重なって表示されます。ユーザは、アイテムをグループとしてドラッグし、それらを所望の目的地にドロップする。たとえば、ホーム画面では、複数のアプリアイコンを選択して一度にフォルダにドラッグできます。写真のような一部のアプリでは、ドラッグする前に複数の項目を選択できる選択モードが用意されています。

  • アプリ内のコンテンツをドラッグアンドドロップすると、移動またはコピーが発生するかどうかを判断します
     一般的に、移動元と移動先のコンテナが同じである場合(ドキュメント内のテキストをドラッグする)、移動は意味をなします。コピーはそれらが異なる場合(ドキュメント間またはアプリケーション間でドラッグする)に意味をなします。
     しかし、必ずしもそうではありません。とりわけ、ドラッグ&ドロップは直感的に動作するはずです。リマインダーでは、リマインダーをリスト間でドラッグすると、リマインダーをコピーする代わりに、リマインダを移動させることができます。アプリケーション間でコンテンツをドラッグ&ドロップすると、常にコピーが作成されます。

  • 可能な限り、人がドラッグアンドドロップを元に戻すようにします
     一般的に、誤って目的地にコンテンツを落とした場合、元に戻すと元の状態に戻ることができます。つまり、削除されたコンテンツを削除し、アプリ内の他の場所から移動した場合は、元の場所に復元する必要があります。

  • スプリングローディングを有効にすることを検討します
     スプリングローディングを使用すると、ユーザーは選択したコンテンツをドラッグしたり、コンテンツを削除せずに一時停止したりすることで、ボタンやセグメント化されたコントロールなどの特定のコントロールをアクティブにできます。たとえば、メールでは、選択したメッセージをナビゲーションバーの[戻る]ボタンにドラッグすると、メールボックス階層内の他の場所にアクセスできます。コントロールをアクティブにする唯一の方法は、スプリングロードを絶対にしないことです。それを発見できる装飾として使用してください。ほとんどの場合、スプリングロードコントロールはタップジェスチャーにも対応する必要があります。開発者ガイダンスについては、「UISpringLoadedInteraction(UISpringLoadedInteraction - UIKit | Apple Developer Documentation)」を参照してください。

ドラッグされたコンテンツの提供

  • 必要に応じてドラッグ項目のプレビューをカスタマイズします
     一般に、ユーザーの指の下に表示されるプレビューは、ドラッグされているコンテンツの半透明の表現である必要があります。この外観はコンテキストを提供し、ドラッグが進行中であることを示し、ドラッグされたコンテンツの下の宛先をユーザが見ることを可能にする。

  • 可能であれば、ドラッグしたデータの表現を最高から最低の順に並べて表示できます
     たとえば、ラインアートを提供するとき、あなたのアプリはPDFベクタ表示、透明度を持つロスレスPNG画像、透過性のない損失のあるJPEG画像をその順序で提供することができます。このようにして、宛先はインポートできる最高品質の表現を選択できます。

  • 該当する場合は、ネイティブバージョンのカスタムオブジェクトを最も豊富なデータ形式で表示します
    たとえば、グラフをドラッグできるようにするアプリでは、ネイティブチャートオブジェクトを最初に表示する必要があります。次に、チャートオブジェクトをサポートしていないアプリケーションのために、チャートのイメージバージョンのような代替案を提供する必要があります。

  • アプリケーションのコンテンツの転送に時間がかかり、リソースを大量に消費する場合は、ファイルプロバイダ拡張を実装します
     ファイルプロバイダの拡張機能は、アプリが実行されなくても、転送プロセスを管理し、ファイルシステムの完了を保証します。転送プロセスは、ユーザーがコンテンツを削除するまで開始されないことに注意してください。開発者ガイダンスについては、「NSFileProviderExtension(NSFileProviderExtension - FileProvider | Apple Developer Documentation)」を参照してください。

  • アプリのコンテンツの転送に時間が必要な場合は、進捗情報を入力します
     コンテンツをダウンロードする必要がある場合、または大きなファイルにコピーする時間が必要な場合は、進捗情報を提供してください。最低でも、コンテンツの合計サイズを指定して、宛先が残り時間を計算し、適切な進行状況インジケータを表示できるようにします。開発者向けのガイダンスについては、NSProgress(Progress - Foundation | Apple Developer Documentation)を参照してください。

ドロップされたコンテンツの受け入れ

  • 視覚的手がかりを使用して、潜在的な目的地を特定し、コンテンツを削除する効果をプレビューします
     ハイライト、挿入ポイントインジケータ、およびアニメーションは、すべて可能な宛先を識別する適切な方法です。ビューがコンテンツをドラッグすると、ビューが微妙に点滅して色が変わることがあります。または、ドラッグしたイメージのためのスペースを確保するためにパラグラフを移動することもできます。画面に複数の可能な目的地がある場合は、一度に1つを特定します。コンテンツがソースから完全にドラッグされてから再入されない限り、ソースコンテナと宛先コンテナが同じである場合は、ハイライト表示は不要です。コンテンツが落とされたとき、または目的地の上に配置されていないときは、強調表示が削除されていることを確認します。

  • 必要に応じて目的地のコンテンツを自動的にスクロールします
     コンテンツを目的地の外にドラッグすると、目的地のコンテンツをスクロールするか、まったく別の目的地にドラッグを続けるかどうかをアプリケーションが判断する必要が生じる場合があります。アプリでドラッグを続けることができる場合は、ドラッグされたアイテムがその上に配置されているときに自動スクロールする領域を定義することを検討してください。たとえば、メール内のメッセージが長すぎると、コンテンツが本体領域の上部または下部にドラッグされたときに自動的にスクロールします。標準のテキストビューとテキストフィールドでは、自動的にこの動作が適用されます。

  • ドロップされたコンテンツの最も豊かな表現を抽出して表示します
     たとえば、アプリに複数の表が表示されることがあります。あなたのアプリがチャートをサポートしている場合、ネイティブチャートオブジェクトを抽出して表示することができます。あなたのアプリがチャートをサポートしていない場合、チャートのイメージバージョンを抽出して表示することができます。

  • 該当する場合、削除されたコンテンツの関連部分のみを抽出します
     たとえば、連絡先から連絡先をメールメッセージの受信者フィールドにドラッグすると、連絡先のアドレス情報ではなく名前と電子メールアドレスだけが使用されます。

  • コンテンツが削除された後のプレースホルダをテーブルビューおよびコレクションビューに表示します
     プレースホルダーは、コンテンツの転送が完了すると、コンテンツがどこに存在するかを一時的に示します。

  • ドロップされたコンテンツの転送に時間が必要な場合は、進行状況を表示します
     デフォルトでは、アプリ間で時間のかかる転送が発生すると、アプリモーダルアラートが表示されます。テーブルビューまたはコレクションビュー内のプレースホルダに進捗インジケータを表示するなど、進行状況が表示される方法をカスタマイズすることを検討して、ユーザーがあなたのアプリケーションの使用をブロックされないようにします。転送プロセスは、ユーザーがコンテンツを削除するまで開始されないことに注意してください。

  • ドロップされたコンテンツがプロセスを開始したときにフィードバックを提供します
     ユーザーがタスクを開始するコントロール(たとえば、共有サイトにビデオをアップロードする)にコンテンツをドロップすると、タスクが開始されたことが示され、その進行状況がユーザーに通知されます。

  • 落書きが失敗したときにユーザーに通知します
     ドロップされたコンテンツを挿入できない場合、おそらくファイル転送が中断されたため、ドロップが失敗したことをユーザーに通知します。

  • ドロップされたテキストに適切なスタイルを適用します
     ソースとデスティネーションが同じスタイル付きテキスト属性をサポートする場合、ドロップされたテキストは元のフォント、書体、サイズ、およびその他の属性を維持する必要があります。それ以外の場合、ドロップされたテキストは宛先のスタイルを採用する必要があります。

  • ユーザーがドラッグアンドドロップを直ちに元に戻すことができないときには、微妙で直感的な方法でオプトアウトすることを検討してください
     たとえば、共有アプリケーションでは、削除されたコンテンツを投稿する前に中間共有シートを提示することがあります。このシェアシートは、ステータスメッセージのような追加のコンテンツを提供する方法を提供し、キャンセルボタンも提供します。写真は、共有写真ストリームにドラッグされたときにこの現象を示します。