学習進捗管理アプリを開発する中で得たモーダルに関する知見など

<p>本記事は筆者が学習進捗管理アプリ&quot;LLog&quot;を開発している中で得たUIの知見などを整理する目的で書かれた雑多なメモである。</p>
<p>なおLLog周りの用語については以下のレポジトリのREADMEに記載されている。</p>
<p><a href="https://github.com/awyaki/llog" target="_blank" rel="nofollow noopener noreferrer">https://github.com/awyaki/llog</a></p>
<h2>考察</h2>
<p>モーダルは現在閲覧しているUIに覆いかぶさる形で表示される。そのためモーダルのUIの下に表示されているものは当然見えなくなる。またモーダル表示中はモーダル以外の部分の操作を受け付けなくなる実装にすることが多い。</p>
<p>以上の特徴からモーダルが適している場面と適さない場面を考える。</p>
<p>モーダルが適している場面には以下のような場面が考えられるだろう。</p>
<ul>
<li>ユーザーに必ず行ってほしい操作を要求する場面</li>
<li>ユーザーが今集中すべきことは何かを示したい場面</li>
</ul>
<p>適切だと考えられる例：LLogではログ（学習記録）を作成する際に必ずタイトルを付けるように要求する設計になっている。これは「学んだことの要約」を付けることで学習の定着を図る仕組みなのだが、ユーザーに「必ずタイトルを付けさせる」「タイトルを付けるという行為にフォーカスさせる」という目的でタイトルを入力するUIにはモーダルを選んだ。</p>
<p>反対にモーダルが適さない場面は以下のような場面が考えられる。</p>
<ul>
<li>次の操作にモーダルによって隠れてしまう部分のUIの情報が必要である場面</li>
<li>モーダル上の操作とモーダルに隠れてしまうUI上の操作のどちらもできるようにすべき場面</li>
</ul>
<p>適さないと考えられる例：LLogでは新規コンテンツ追加UIにモーダルを採用していた。このモーダルは既存のコンテンツのリストを覆い隠すものであった。実際にアプリを使ってみると、新規コンテンツを追加するとき既存のコンテンツのタイトルを確認したりタイトルをコピーするようなこともあり既存のコンテンツがモーダルによって覆い隠される挙動は不便であった。</p>
<h3>モーダルに必要なシグニファイアを考える</h3>
<p>モーダルは通常「モーダルの下に位置するUIに関する操作」を阻害し
UIを「現在操作できるUI」と「現在操作できないUI」に分割する。「操作できないUI」上のボタンを押そうとすることに意味はないため「操作できるUI」と「操作できないUI」には何らかの形で明確な&quot;コントラスト&quot;をつけるなどしてユーザーに対して「現在どのUIを操作できるのか」を示す必要がある。</p>
<p>&quot;コントラスト&quot;としてはモーダルの下に「操作不能になるUIに&quot;オーバーレイ&quot;を置く」というものがある。この&quot;オーバーレイ&quot;の色は「操作不能になるUIの色の明度を明確に落とすような色」を選ぶべきである。もし明確なコントラストをつけなかった場合は「後ろに見えているUIのボタンを押そうとしたら
&quot;UI&quot;（この&quot;UI&quot;はモーダルであるがユーザーはモーダルであると認識しているとは限らない）が閉じてしまった」「後ろに見えているUIのボタンを押そうとしたが押せなかった」などユーザーにとって予測不能な挙動となる可能性がある。</p>
<h2>参考文献</h2>
<ul>
<li>Norman, D. A. (2015). 誰のためのデザイン? 認知科学者のデザイン原論. 日本: 新曜社.</li>
</ul>


モーダルについての考察