0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Human Interface Guidelinesを理解する その2

Posted at

ロードに関して

コンテンツの読み込みに関して、何らかのわかりやすい動きを示す必要がある。Netflixのダウンロードや、音声がどれくらい流れているか?といったこと。ここら辺はコンテンツ系のアプリを使用してみると、どんな感じでコンテンツを利用しているかをみることができる。

・ロード発生をしっかり伝えること
ロード中のクルクルを出してしっかりロード発生を伝える。あわよくば、どれくらいの進捗かどうかも伝えれれば良い。
プログレスバーなどで表示できそう。Youtubeではスケルトンビューでローディングをしているのを思い出した。。

・なるべく早くコンテンツを表示する。
ユーザーが操作している間にバックグランドでローディングをしておくなどの工夫が必要。個人的には動画とかでなければ1秒以上読み込みが起こると違和感があるなぁと感じる。
身近なものだとTiktokは動画をバックグラウンドでとってきて、ユーザーに読み込みをほとんど感じさせない設計になっているのかな?とてもUX体験が良い

・ロード中に代わりとなるコンテンツ(動画や音声、ゲームなど)を表示してロード中であることをユーザーに感じさせない。
あんまし身近なもの例が思いつかない。あまりゲームをしないからかも
・インジケーターや他のロードを示すコンポーネントをアプリの世界観にあったものにする。

 モーダルに関して

・モ-ダルは、ユーザーのそれまでの文脈から離れ、一時的にコンテンツを提示するデザイン手法。
終了するには明示的なアクションが必要となってくる。
モーダルでコンテンツを提示することにより、
ユーザーは自己完結型のタスク,ある一つのタスクに関する一連のまとまった操作に集中できる
ユーザーに重要な情報を示し、必要に応じて次の操作を誘導する

モーダルの仕方
シート
シートスタイルは、コンテンツを部分的に覆うカードとして表示される(ViewControllerの上にポンと出てくるやつ)、カバーされていないすべての領域は暗くすることで、ユーザーの操作を意図的に防ぐ。
親ビューまたは前のカードの上端は現在のカードの後ろに表示され、カードを開いたときに中断したタスクを思い出せるようにします。
複雑なタスクを行わず、非没入型のモーダルコンテンツにはシートを使用します。

フルスクリーン
フルスクリーンスタイルは、画面全体をカバーする。
前のビューは完全にカバーされているため、混乱を抑えられる。
ユーザーはボタンをタップじしてフルスクリーンを閉じる
フルスクリーンは、ビデオ、写真、カメラビュー等の没入型コンテンツや何かのデータの編集などの複雑な一連のタスクをする場合に使用する。
ユーザーデータの編集とかメールを送信するとかでよく使われているイメージ。

モーダルを使用する場合の注意点

・合理的にモダリティを使用しましょう
そもそもモーダルは、現在のタスクとは異なるタスクを選択したり実行したりすることにユーザーを集中させる必要がある場合のみ。
モーダルエクスペリエンスは、現在の状況からユーザーを引き離し、閉じるためのアクションを必要とするので、明確なメリットが得られる場合にのみ使用し、むやみやたらに使用するべきではない。

・不可欠な(かつ実利的な)情報を提供するためにアラートを残しておく
アラートは何かが間違っている場合に表示する。むやみやたらに使用するものではない。そこに正当性を持たせることが必要。

・モーダルタスクはシンプルで短く、焦点を絞りましょう
モーダルタスクが多かったり、モーダルを階層構造で多くなると元の画面に戻ることが難しくなり、「そもそもなんのタスクでこの画面をモーダルさせったんだっけ?」となるのでやめた方が良い。

・常にモーダルビューを閉じるボタンをつける。
完了またはキャンセルのボタンを絶対つけたほうが良い。

・必要に応じて、モーダルビューを閉じる前に確認し、データの損失を回避する
メールの下書きとかをイメージするばわかりやすい。モーダルを閉じる前に「データがなくなっちゃうよ!!」と言ってあげる。

・ポップオーバーの上にカードを表示しない
ポップオーバーは簡単な補足や情報を表示したりするのに便利だが、複雑なものは混乱させる

・一般に、モーダルタスクを識別するタイトルを表示しましょう
モーダルタスクに入ると、以前のタスクから切り替わるので、新しいコンテキストを明確に示す必要がある。

・モーダルビューの外観をアプリと整合性を持たせる
ナビゲーションコントローラーにモーダルしてそれが明示的にわかってないとユーザーが混乱してしまうよ。

・アプリ内で一貫したモーダルの遷移スタイルを選択する
モーダルを表示させる方法はアプリ内で一つに限定した方が良い。下から上が一般的だが、上から下へしてみたり、ハーフモーダルが多かったりすると混乱する。

0
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?