こんにちは、だいきです。
みなさんApple製品は好きですか？
弊社、Goodpatchのメンバーは全員Macで作業をしています！
今回は私たちを魅了し続けるAppleのUIデザインの秘密に書かれている記事を発見しましたので翻訳しました！
(以下は“5 Secrets of Good UI Design from Apple’s Human Interface Guidelines”の翻訳記事です)
Appleのプロダクトやアプリが明確、かつシンプルでとても魅力的であることの秘密はデザインにあります。
そして、そのクオリティを保ち続けられる秘訣はAppleのヒューマンインタフェースガイドラインにあるとされています。
今回、そのガイドラインをチェックし、様々なWebサイトに応用できるとわかりました。
特に、彼らのUIデザイン哲学は、とても勉強になります。
以下があなたのWebサイトやWebアプリにとって非常に重要なAppleのガイドラインからの助言5つです。
メンタルモデルを使用する
photo credit: bjornolsson via photopin cc
ユーザーがWebサイトを訪れた際はすでに、他のWebサイトでの過去の経験から基づいて、何が起こるかを予想し、期待しています。
ユーザーがあなたのWebサイトに訪れると、ユーザー自身のメンタルモデルに適合し、あなたのWebサイトを理解できるか確認をします。
Appleがこのモデルに影響を与える4つの要因
- 親しみやすさ – これはユーザーがこれまで他の類似サイトで得た経験に基づいています。その習慣はWebだけにとどまらず一般的な習慣（例えば、写真のポートフォリオなど）にも及びます。
- シンプルさ – Appleはいかにユーザーがタスクを簡単に完了できるかに力を注いでいます。メインアイデアを大量の詳細で台無しにしないでください。Webデザインにおいてゴールとは重要な道筋を明示するものです。
- 便利さ – 便利さは、シンプルと似ています。ここでの考え方は、ユーザーが何かを必要とする時に必要なものへと導き、ユーザの欲求を満たすことです。そしてユーザーにとって重要なものは削除しないでください。（例えば、製品解説ページにある配送料金）
- 見つけやすさ – 見つけやすさを重視することでユーザーがクリック可能であるかを理解しやすくなり、Webサイトを使ってくれる手助けとなりますa例えば、うまく設計されたメニューアイコンを使うことで、ユーザーがあなたのWebサイトのコンテンツを迷うことなく探しだすことができます。
明示的および暗黙的なユーザーアクションを理解する
これは理解するべき素晴らしいアイデアですが、Webサイトにどのように適用されるかを確認するには時間がかかります。
主に把握するすべきものは、明示的なユーザーアクションと暗黙的なユーザーアクションの差です。
明示的なアクションとは、ユーザーが直接起こす行動のことです。
例えば…
リンクをクリックする、またはテキストフィールドに値を入力する。
これは本当に単純明快な概念です。
暗黙的なアクションとは、ユーザーがサイトのアイコンやシンボルから行動を判断し行うアクションのことです。
例えば、wordpressでは、明示的なユーザーアクションは、目的の写真を見つけ、写真をアップロードするときに、参照機能を使用することです。
同じ動作をするときの暗黙的な方法は、アップロード画面上で画像のアイコンをドラッグ＆ドロップすることです。
Webサイトを作る際には、ユーザがアクションを起こしやすいようなデザイン設計にしてください。
ダイレクトな操作を促す
(blanklabel.com)
ダイレクトな操作できるデザインは、ユーザーにあなたのプロダクト、またはサービスが実際に手で触れる（クリックできる）と認識してもらうことができます。
厳密に言えば、これは直接的な行動を通じてユーザー暗黙な行動を促すことを意味します。
この良い例は、オンライン衣類のサイトです。このサイトでは画面左にあるマネキンに洋服をドラッグ&ドロップするとマネキンの着ている服が変わるります。
これは単にスイッチをクリックすることとは異なり、明示的なアクションとして分類されます。
ユーザーにコントロールさせよ
photo credit: Icky Pic via photopin cc
ユーザーがWebサイトで行うことが複雑になる場合は、ユーザーにコントロールをさせましょう。
Webサイトはユーザーの行動/意思決定のサポートと、不要なアクション（データ損失など）が起こらないように手助けをしましょう。
livestrong.comやmint.comといったサイトや、コンテンツ主導型サイトhuffpost.comは、
Webサイト上で見るものや、ユーザーが操作するデータをユーザーにコントロールさせることで成功しています。
フィードバックとコミュニケーションを促す
photo credit: Dell’s Official Flickr Page via photopin cc
AppleのデザインはあなたのWebサイト（プログラム/ app）にフィードバックとコミュニケーションのわずかな手がかりを与えるということについて話をしています。
AppleのWebサイトやアプリよく見られるロードバー（ “ダウンロード完了まで残り時間 …分” のようなもの）はアクションが一定の時間かかる時に表示され、ユーザーにそのアクションが完了するまでにどのくらいの時間がかかるか（どのくらいの時間待てばいいのか）を理解してもらうことができます。
他にも様々なWebサイトで見ることができるパンくずリストは、ユーザに今、Webサイトのどこにいるかのフィードバックを与えるための有効な手段です。
追記: この記事に誤訳の箇所があるとゼロベース株式会社の石橋様よりご指摘をいただきましたので「ユーザーにコントロールさせよ」の箇所を訂正いたしました。ありがとうございました。