できないことが多いADHDフリーランス、自己肯定感を上げるには?
- コラム
- 健康で文化的なADHDフリーランスのお仕事ハック
- 連載
思うように閉じてくれないウィンドウに、イライラしたことはありませんか? モーダルウィンドウとは、まさにそんなウィンドウのこと。
Webサイトやアプリケーションに組み込まれるUIのひとつであるモーダルウィンドウについて、適切な使い方や基本的な情報をまとめました。
モーダル(=modal)とは「モードを持つ」という意味で、「あなたがこのウィンドウを閉じるまでなにもさせません」というウィンドウのことです。
ウィンドウ内で表示された操作を完了する、あるいはキャンセルをしなければ、ウィンドウの外をクリックしても戻れません。
このため、モーダルウィンドウはユーザーに重要な操作や確認を促したりするときに用いられることが多いです。また、モーダルウィンドウは『JavaScript』で作られることが多いです。
近年は操作感が悪くなるという理由から、モーダルウィンドウを避けるデザイナーが多くなっています。さらに、最近のOSではダイアログボックス自体使われることが少なくなってきました。
▲Chris Johnson / CMJ
モーダル:表示されたタスクが完了するまで、ユーザーは他の作業を行えない。ユーザーは表示内容に従うか、モーダルウィンドウを閉じなければならない。
ポップアップ:ポップアップウィンドウが表示されても、作業中の画面の操作を続行できる。
モーダルウィンドウは、決定的な操作をさせたいサービスの提供者・開発者にとっては使いやすい手段ですが、ユーザーにとってはどうでしょうか。デバイスがなんであれ、モーダルウィンドウはユーザーエクスペリンスを悪くしてしまうと言われています。
多くのアプリケーションでは、モーダルウィンドウのサイズを最適化できなかったのが原因で失敗しているケースがたくさんあります。
特に、画面サイズが小さいほどモーダルウィンドウは向いていません。また、ほとんどのスマートフォンでオンボードキーパッドが使われていますが、このキーボードが画面のほとんどを占めていることがよくあります。
小さい画面内に、閉じられないウィンドウが表示されてしまうとユーザーの混乱を招きます。
ユーザーが望まない機能を無理やり実行させる必要はあるでしょうか? 開発者は、どんな機能でも強制的に実行させる力を持っています。それゆえにユーザーの気持ちになって考えることは大切です。
モーダルウィンドウのような機能は、時としてユーザーが望まない動作を無理やりさせることとなってしまいます。必然的に、これはユーザーのストレスとなってしまいます。
モーダルウィンドウで入力や選択肢のセレクトを求めるなら、代わりにアコーディオンUIを採用するのがおすすめです。
アコーディオンUIとは、まとまったデータがひとつのラインに収納されていて、通常の状態ではコンパクトなのですが、ラインをクリックすることで隠れていたコンテンツが拡大されて表示されるようになります。
見た目がすっきりしますし、同じWebページ内にすべてを表示することができるのが強みです。
モーダルウィンドウとアコーディオンUIの一番の違いは、モーダルウィンドウではコンテンツを表示するためにユーザーを違う画面に飛ばしてしまうのに対し、アコーディオンUIでは同じページ内で表示できることです。
アコーディオンUIならシームレスにコンテンツの表示、非表示が行えますし、アイコンを工夫してわかりやすくすることで使いやすくなります。例えば、バツを使えば閉じるアイコンだと、誰でもわかりますね。
できる限りモーダルウィンドウの使用を避けて、代わりにアコーディオンUIを使うようにしましょう。
▲Aaron Stump / dribbble
アプリケーション上でユーザーがボタンをクリックした時に、裏で大きなプロセスが始められることはよくあります。しかし、ユーザーからすると何が起こっているのかまるでわかりませんよね。
そこでWebサイトが動いていないと勘違いしたユーザーが、同じボタンを再びクリックしてしまうことも起こり得ます。
これを防ぐために、モーダルウィンドウを使ってプロセスが進行中であることを知らせてあげましょう。
▲出典 : Muharrem Senyil
モーダルウィンドウの主な使われ方のひとつに、エラーメッセージの表示があります。Webサイトやアプリケーションでは扱うことができないアクションが実行されそうな時に使用します。
たとえば、他のアプリケーションで使用中のファイルを消去しようとすると、「他のアプリケーションで使用中のため、実行できませんでした」というメッセージを表示することができます。
▲出典 : Mariusz Ciesla
ユーザーが損失に繋がるような行為をしそうな時に表示する警告メッセージを表示するのにも有効です。そうすることで、間違ってファイルを消去するのを防ぐことができます。
例えば、先ほどの例の続きで、使用中のファイルを消去しようとしている時に「本当に実行しますか?」などのメッセージを表示することができます。
最近のユーザーはこれらのポップアップに慣れてしまい、あまりよく確認せずに「OK 」を押してしまうことが多いので、より強調したデザインにするか、必要のないポップアップを減らしましょう。
モーダルうウィンドウはモバイル機器に向いていません。過多なスクロールやページの変更により、画面が小さく、煩雑になり、ユーザビリティが低下します。
Webサイトの目的によってはこの複雑さが問題になってしまうこともあるので、使うときにはじっくりと検討しましょう。
▲出典 : Joris Rigerl
(翻訳:Juri Ando)
40,000人以上が使う!日本最大級のフリーランス・副業向けマッチングサービス『Workship』
「フリーランスとして、もっと大きな仕事にかかわりたいな……」
「企業で働いてるけど、副業でキャリアを広げていきたいな……」
「報酬が低くて疲弊している。もっと稼げるお仕事ないかな……」フリーランス・副業向けマッチングサービス『Workship(ワークシップ)』が、そんな悩みを解決します!
- 累計40,000人以上のフリーランス・副業ワーカーが登録
- 東証プライム上場企業からスタートアップまで多数参加
- 土日、週1、フルタイムなどさまざまな働き方あり
- 公開中の募集のうち66%がリモートOKのお仕事
- 時給1,500円〜10,000円の高単価案件のみ掲載
- お仕事成約でお祝い金10,000円プレゼント!
利用料は一切かかりません。一度詳細をのぞいてみませんか?