UIデザインでHIGを学ぶべき3つの理由 | CAVIN Tech Blog

こんにちは、CAVINインターンの竹崎です。
最近は主にUI/UXデザイン領域を担当しています。UIの勉強は始めたばかりなので、まず何をすればいいのかを UI/UXのプロの方に聞いてみたところ、「まずは、HIGを見てみよう。」と言われたので言われた通りHIGのインプットから始めました。

HIGとは

HIGとは、Apple Human Interface Guidelinesの略称で、アップルがアプリケーション開発者向けに提唱しているデザイン原則のドキュメントです。アップルのデザイン主義から、IOS、Mac、Apple watchなどデバイスごとにおけるデザインのルールが記載されています。

アップルの目的は、アプリケーションインターフェイスをより直感的で学習しやすく、一貫性のあるものにすることにより、ユーザーのエクスペリエンスを改善することにあります。

UIデザインでHIGを学ぶべき理由

1. ユーザーを目的地に誘導するため

アップルが提唱するアプリケーションのデザイン原則では、「１つのアプリで、１つの目的が達成されるように設計を行う」とあります。
例えばIOSアプリでいうと、カメラアプリは写真を撮るという１つの目的があり、その目的をユーザーが達成しやすいように設計されています。

このように、まずはこのサービスでできる事は何か、そして目的地を設定してあげて、達成するための手順をどうデザインしていくかを考えていきます。

2. 顧客体験を向上させるため

UIデザインは顧客体験を向上させるためにかなり重要な部分になります。
顧客体験(UX)とは、サービスに触れる前から実際に触った後までを時間軸としてます。そのため、実際にサービスに触れる段階であるUIを改善する事で、顧客体験も改善することに繋がります。
例えば、iOSの基準では、最小フォントサイズは 11pt で、本文の基準は 16pt が推奨とあり、ボタンやフォントの大きさを少し修正しただけでも、ユーザーがそのサービスに触れた後の満足度を向上させることに繋がります。

3. チームでの共通言語となるため

アプリケーションはWebサービスを構築していく際、ある程度のガイドラインに沿ってデザインを進めていくことで、開発者との共通言語として説明ができるため単純にスピードがあがります。
また、UIを見た時にUI/UX的に良くない理由をきちんと説明する事ができるので、デザインチームの中でも、デザインの質を詰めていく際も重要となってきます。

これだけは押さえときたい機能や原則

実際にガイドラインを読んでみて、この原則使えそうだなとか、これ知らないとデザインする時失敗するなとかあったので、3つの機能の意味と注意点を紹介していきます。

モダリティ

Apple ヒューマンインターフェイスガイドライン | モダリティ

モダリィティは、ある目的を達成させるために一時的に以前の画面から分岐するデザイン技法の事を指しています。例えば、Webサイトでレストランを調べて、お店に予約の電話をする時に、電話番号のアイコンを押すと、モーダルとして電話番号の画面が一時的に表示されるものがあります。モダリティを使うタイミングは基本的に、ユーザーが注目する必要があり、重要な決定をする場面で使われます。また、モーダルは二段階で使用することを推奨していません。なぜなら、モダリティ自体が今自分がいる場所がわかりづらくなってしまうため、さらにそこからモーダルを使うと、ユーザーの現在地が掴みにくくなるからです。
引用: IOS HIG "Modality"

ユーザーがナビゲーションを使う時というのは、基本的に自分のいる場所がわからない場合や、予期しているページが見つからない時などです。そのため、そのサービスの構造や目的がわかりやすいようにナビゲーションを配置する必要があります。ナビゲーションのスタイルも様々でアプリの目的ごとに仕様を変えていきます。
引用: IOS HIG "Navigation"

ナビゲーションを配置する際はこれだけは意識しようね

ナビゲーションのスタイルに関わらず、次の目的地の行き方やユーザがアプリ内のどこにいるのかを認識させなければならないということです。
そのためには、遷移ボタンやアイコンなどを、ユーザーが行きたいページに行けるように、わかりやすくデザインしていきます。具体的には、アイコンなどを感覚的に理解できることや、言葉で説明できるようにならなければなりません。また、目的を達成させるまでのルートを最短にし、到達しやすい情報設計をしていきます。

フィードバック

Apple ヒューマンインターフェイスガイドライン | フィードバック

まず、フィードバックはユーザーの現在の状況をまとめて表示する機能です。
フィードバック機能の理想は、ユーザーが何もせずとも重要な情報を得ることができ、なおかつそのフィードバックがユーザ行動の邪魔をしないことです。例えば、メールなどのアプリでは、送信ボタンを押すと送信完了がわかるようにデザインされています。送信した後の情報は、画面の中央ではなく目立たない場所でなおかつ的確な情報を伝えられる設計になっていることがわかります。また、フィードバック機能をつける際は、不必要な警告を避ける必要があります。警告表示を乱発しすぎると、ユーザー側がその表示にも慣れるようになり、本当に伝えたい情報を見落としてしまう可能性があるからです。
引用: IOS HIG "Feedback"

これからやってみたいこと

ガイドラインに書いてある機能や原則などは顧客心理をとらえるのに非常に役立ったので、もっと深くガイドラインを読み込んでいきたいです。
また、文書を読んでみて思ったのが、デザイン原則を読んでいくうちにアップルの思想みたいなものを感じたので面白かったです。
もちろんここに書いてあるのはHIGのほんの一部となるので、気になった方はぜひ読んでみてください。

このように、HIGを読むことで、アップルが提唱するデザインの基本ルールをおさえることができました。これにより、サービスを利用してもらった時の顧客体験を向上させることに繋がると感じました。

ということで、次回はHIGを学んだことで、実践だとどんな所が役に立ったのかを自分の体験を元に書いていきます。よろしくお願いします。