Developer's Blog

ドリルダウンか?モーダルか?

ここに、テーブルに並んだデータのタイトルを付ける画面があります。

「この画面は横にドリルダウンしてたどり着くべきか、はたまたモーダルで開くべきか」

Navigation or Modal

iOS アプリの UI を考えたことがあれば、何度も出くわす問いです。テーブルのデータをユーザーが編集したり新規作成したりするのはよくある話ですね!どちらがベストか悩んだときは、その画面の役割や操作感の違いに注目することでヒントが得られます。

モーダル画面は操作の流れの途中に差し込んで、ユーザーがしたい操作を確実に完了するための画面です。今回の用途なら、モーダル画面で操作できれば要件は満たせます。

しかし、ドリルダウンで遷移した画面で編集できたほうがユーザーにとってわかりやすいときもあります。iOS アプリは、PC のような「ファイル」を意識しなくても使えるようになっています。例えば文章を書き直せば、それは書き直された通りに iPhone や iPad 上に存在します。保存する必要はなく「したらその通りになる」シンプルで現実世界に近い仕組みです。これを考慮すると、作業そのものよりも、何を編集しているかがわかりやすいドリルダウンのほうがこの仕組みに即しているといえます。

さて、冒頭の問いに戻ります。この画面は、ドリルダウンか?モーダルか?

この場合は、編集か新規作成かで両方を使い分けるのがいいのではないでしょうか。

すでにあるものを書き換えるときには、ドリルダウンしてその場で編集できたほうが自然です。詳細画面まで行って編集するので、より「すでにあるものを編集する」感が出ますし、編集対象も明確です。

対して、新たにつくりたいときは、モーダル画面がよさそうです。モーダル画面は「保存」と「キャンセル」を置いて、ユーザーに作業そのものとその完了を意識させることができます。ドリルダウンした先での編集より「まだないものを新たに用意する」感があると思いませんか?

実は、冒頭の画像は両方とも Sleipnir Mobile の中で実際にある画面です。タイトルは隠していますが、FenrirFS ブックマークの「ラベルグループを編集」と「ラベルグループを作成」がその正体です。上記のような理由から、新規作成のときは「明示的に保存またはキャンセルできる」モーダル、編集のときは「すでにあるものを変更する」ドリルダウン、という具合に使い分けています。

もちろん場合によって様々な答えがあり、いつでもこの方法がベストとはいえません。しかし、各画面の役割やユーザーが操作するときに受ける印象を把握して、その操作をどう見せればより自然かを考えることで、どんなケースでも最適な解が見つかると思います。

Slepnir Mobile の Mac チームのアプリSleipnir for Mac をダウンロード

Copyright © 2019 Fenrir Inc. All rights reserved.