Macintosh から iPhone へ受け継がれるデザイン原則

さて、6月後半でそろそろWWDCの熱狂が落ち着いてきた頃合いだと思いますが、平熱に戻った今だからこそ改めてWWDCを振り返ってみたいと思いました。デベロッパーとしては、これからがある意味でWWDC本番なのかもしれません。今回も気になるセッションやAPIはいろいろあるのですが、その中でもデザイン系のセッションはいつにも増して﹁Appleが考えるデザイン﹂というメッセージが込められていた印象があります。


●802 Essential Design Principles

●803 Designing Sound

●804 Designing Across Platforms

●816 Love at First Launch


802 Essential Design Principles は、﹁デザイン原則とはどのようなものか﹂をAppleのデザイナーが直接解説するという今まであまり見られなかった内容となっており、とても興味深いものでした。それまでは、﹃我々はガイドラインを用意したから、デザイナー諸君、あとは読み取ってくれ﹄という具合に割と放置されがちだったというか、Appleからの一方的なアクションが良くも悪くも目立っている印象でした。そういう意味では、今回のこのようなセッションはTim Cook体制になってからのAppleの大きな変化の一つのように感じられました。

このセッションはヒューマンインターフェイス・デザインにおけるデザイン原則を我々に示してくれていますが、この内容を確認する前にまず、Apple Human Interface Guidelines の歴史とそこで定義されてきたデザイン原則についておさらいしなければなりません。

Apple Human Interface Guidelines のはじまり

AppleはApple IIやLisa、初代Macintoshを作った際に、デスクトップ・インターフェイスとは何かを定める Apple Human Interface Guidelines (HIG) を出版しました。HIGでは、人間とコンピューターがどう対話すべきであるのか、あるいは、クリエイターはどのようにしてデスクトップ・インターフェイスを設計すれば良いのか、それらを設計思想と題してデザイン原則を定めています。

最初のHIGは “The Apple Human Interface Guidelines” で出版年は1978年とされていますが、今から40年も前のものなので私はこの版を目にしたことがありません。有名なのが1987年版の “Apple Human Interface Guidelines: The Apple Desktop Interface” で、私はこれの日本語版を手に入れることができました。英語版の表紙にはApple IIの表記が見られるので、どうやらGS/OSも対象に含まれているようです。


Apple Human Interface Guidelines: The Apple Desktop Interface︵日本語版︶

当初のHIGの内容は主にMacintosh︵あるいはApple II, Lisa︶のデスクトップ・インターフェイスに関するものでした。その後、Macintosh Human Interface Guidelines (1992), Aqua Human Interface Guidelines (2002), Apple Human Interface Guidelines (2005)…… と幾度かの改訂を経て、現在の macOS Human Interface Guidelines に至ります。iOS向けには、この過程でiPhoneが登場した際に独立した文書となっています。

iOS Human Interface Guidelines

iOS Human Interface Guidelines (iOS HIG)の冒頭に注目すると、そこでは 3つの主要テーマ と 6つのデザイン原則 が示されています。改めてこれらの意味を紐解いていきましょう。

iOS HIG (2013-) が示す3つのテーマ

iOSのデザインにおける主要なテーマが示されています。どのようなアプリケーションであってもこれらを意識することが求められます。


●明瞭 (Clarity)

●控えめ (Deference)

●奥行き (Depth)

明瞭 (Clarity)

コンテンツがはっきりと理解できるようにしましょう。

読みやすいテキスト、わかりやすいアイコン、控えめな装飾、意味のある動作、コンテンツ間の適切な余白 (Negative Space)、視認しやすい色やフォントを用いて、そのコンテンツや機能が何であるかを明確に表すようにしましょう。

控えめ (Deference)

ユーザーインターフェイスは控えめに。そして主役であるコンテンツを尊重しましょう。

ユーザーインターフェイスが目立ってはいけません。控えめなインターフェイスはコンテンツを際立たせ、ユーザーがコンテンツと対話する手助けをします。

奥行き (Depth)

奥行きを用いて情報の階層構造をユーザーに意識させましょう。

明瞭なビジュアルと現実的な動き︵トランジション︶により、ユーザーインターフェイスに階層構造が生まれ、画面上に奥行き感が生じます。奥行きはユーザーインターフェイス構造の理解を促します。タッチ可能かどうかの判断のしやすさ︵発見可能性︶は、コンテクストを見失うことなく機能やコンテンツへアクセスすることを可能にします。

透過、ぼかし効果、ドロップシャドウ、適切なイージングを効かせたトランジションは奥行き感を演出できるビジュアル表現ですが、過剰に用いてしまうと逆にコンテンツを阻害する原因にもなり得るので、これによりユーザーインターフェイスが主役とならないよう十分に注意を払いましょう。

iOS HIG (2017) が示す6つのデザイン原則

iOS HIGでは次のデザイン原則が定義されます。


●美的完成度 (Aesthetic Integrity)

●一貫性 (Consistency)

●直接操作 (Direct Manipulation)

●フィードバック (Feedback)

●比喩の使用 (Metaphors)

●ユーザーによる制御 (User Control)

美的完成度 (Aesthetic Integrity)

ユーザーインターフェイスはただ機能すれば良いのではなく、ユーザーが触れていて心地の良い、魅力的なものになるよう心がけましょう。かつてのユーザーインターフェイスにおいてはこのような観点が欠けていることが一般的でした。

不必要にアイコンを散りばめたり、逆にアイコンを全く用いないとか、あるいは全く一般に認知されていないシンボルを採用したりすることは避けなければなりません。当然、Retina Displayに適合した高解像度の画像を用いることや、アンチエイリアスを効かせた美しい文字を描画すること、要素の配置や大きさに一貫性があることは必須です。このような視覚的な美しさは、ユーザーが画面を長時間眺めていても苦にならないユーザーインターフェイスを実現するためには不可欠です。

一貫性 (Consistency)

一貫性のあるアプリケーションでは、システム標準のコンポーネントや一般的な言語表現、アイコンが用いられます。例えば共有アクションを収めたメニューを設計する場合には、macOSやiOSで広く用いられるシェアアイコンを積極的に採用するようにしましょう。


WWDCでは、Share + Arrow = Sharrow だと笑いを誘っていました。

直接操作 (Direct Manipulation)

ユーザーは画面上の要素に直接触れます。要素の並べ替えの場面では操作ボタンを押すよりも直接指でドラッグして移動できるようにすべきです。このようなドラッグ＆ドロップは最も典型的な調節操作の例でしょう。操作が即座に画面に反映されることで、ユーザーは画面上の要素を制御しているように感じられます。

フィードバック (Feedback)

ユーザーが操作した結果何が起きたのかを伝え返すことは重要です。視覚、聴覚、触覚などによりフィードバックを実現することができます。ボタンやセルをタッチしたらそれらが視覚的にハイライトされるので︵一般には黒っぽくなる︶、ユーザーはそれを押したように感じられます。コントロールセンターのように、隠れているパネルを引っ張り出した際のインタラクションとして触覚フィードバックをうまく活用すれば、パネルがその位置で止まれることをユーザーに示唆できます。

比喩の使用 (Metaphors)

アプリケーションで用いられるオブジェクトやアクションに対してユーザーが経験したことのある比喩︵メタファー︶を用いることで、学習の敷居を下げることができます。画面からはみ出た要素があると、そこはスワイプして移動できるスクロール︵巻物︶と認知することができます。ボタンやスイッチ、スライダーは現実にあるオブジェクトを模しているので、一目見てそれがどのように作用するかを理解することができます。

ユーザーによる制御 (User Control)

ユーザーからアプリケーションを制御する権利を奪ってはいけません。操作の意思決定はユーザーが判断します。モーダルビューに代表されるモードはユーザーから意思決定の幅や自由を奪うことになるので、必要最低限の使用に止めるのが望ましいと言えます。

ユーザーが自由に行動できること、動作の結果が予測可能であること、破壊的アクションがどれなのか確認できること、タスクを取り消し可能であることが望ましいと言えます。

Apple Human Interface Guidelines 今昔

各時代のHIGを比較してみると、前述したiOS HIGの6つのデザイン原則はApple HIG (1987)の﹁基本的な10原則﹂にすべて含まれていることがわかります。この事実からは、1987年に示されたデスクトップ・インターフェイス向けのデザイン原則というのは、現代のタッチデバイスにも通用する﹁普遍的なデザイン原則﹂であることが伺えます。

Apple HIG (1987) の﹁基本的な10原則﹂


●比喩の使用 (Metaphors)

●操作の直截性 (Direct Manipulation)

●見たものを指示する (See-and-Point)

●一貫性 (Consistency)

●WYSIWYG‥スクリーンで見たままをプリントする (WYSIWYG – What You See Is What You Get)

●ユーザによるコントロール (User Control)

●フィードバックとダイアログ (Feedback and Dialog)

●寛容性 (Forgiveness)

●安定性 (Perceived Stability)

●美的完成度 (Aesthetic Integrity)


※﹁Apple Human Interface Guidelines: The Apple Desktop Interface︵日本語版︶﹂の表記に合わせています。

次の表は、Apple HIG (1987), Apple HIG (2005), macOS HIG (2016), iOS HIG (2017)に掲載されているデザイン原則の有無を項目別にそれぞれ比較したものです。こうして眺めると、時代に即したデザイン原則の加筆や削除が行われている一方で、現代にも通用する普遍的なものは生き残っていることがわかります。

お気付きの方もおられるかもしれませんが、macOS HIG (2017) において “Design Principles” の章が削除されてしまいました。

macOS Human Interface Guidelines

そこにはただ “Themes” と書かれているのみで、何十年も受け継がれてきたデザイン原則をAppleは削除しました。これにはどのような意図があるのでしょうか？

WWDC 2017のセッション 802 Essential Design Principles を確認すると、かつてのHIGに書かれていたデザイン原則とは異なる新たなデザイン原則 “Design Principles” が示されています。グラフィックデザインの分野などで馴染みのある言葉が見られるのでそれほど違和感はないのですが、伝統的なHIGのデザイン原則から引き継がれなかったものもあります。Appleはなぜ伝統的なデザイン原則を削除し、新たにデザイン原則を定義し直したのか、その理由は今のところよくわかっていません。macOS, iOS, watchOS, tvOS, CarPlayとプラットフォームが増えたことから、デスクトップ・インターフェイス (macOS) を前提としたデザイン原則をより広く適用可能なものにリデザインしたということなのでしょうか？

Design Principles (2017)


●行き先の探しやすさ (Wayfinding)

●フィードバック (Feedback)

●視認性 (Visibility)

●一貫性 (Consistency)

●メンタルモデル (Mental Model)

●近接 (Proximity)

●分類 (Grouping)

●マッピング (Mapping)

●アフォーダンス (Affordance)

●段階的開示 (Progressive Disclosure)

●80:20の法則 (80/20 Rule)

●対称性 (Symmetry)

まとめ

https://developer.apple.com/design/

☞ Apple Human Interface Guidelines

AppleはLisaやMacintoshを作った際に、Apple Human Interface Guidelines (HIG) を出版し、この文書でデスクトップ・インターフェイスの定義を行いました。HIGではヒューマンインターフェイスのデザイン原則を定めており、これは現代にも受け継がれています。

☞ iOSの主要テーマとデザイン原則

iOS HIG (2017)によると、iOSアプリケーションでは3つの主要テーマと6つのデザイン原則に沿ってヒューマンインターフェイスをデザインするのが望ましいとされています。

iOSの主要テーマ


●明瞭 (Clarity)

●尊重 (Deference)

●奥行き (Depth)


iOSのデザイン原則


●美的完成度 (Aesthetic Integrity)

●一貫性 (Consistency)

●直接操作 (Direct Manipulation)

●フィードバック (Feedback)

●比喩の使用 (Metaphors)

●ユーザーによる制御 (User Control)


過去のHIGと比較するとこれらはiOSに限ったものではなく、ヒューマンインターフェイスのデザインにおける普遍的な理念であると言えます。

☞ macOS HIG (2017) から削除された伝統的なデザイン原則・新たに示されたデザイン原則

2017年、改訂版macOS HIGからは伝統的なデザイン原則が削除されました。その代わりかはまだわかりませんが、WWDCでは新たなデザイン原則が示されました。

伝統的なデザイン原則 (macOS HIG 2016)


●メンタルモデル (Mental Model)

●比喩の使用 (Metaphors)

●明示的および暗黙的アクション (Explicit and Implied Actions)

●直接操作 (Direct Manipulation)

●ユーザーによる制御 (User Control)

●フィードバックとコミュニケーション (Feedback and Communication)

●一貫性 (Consistency)

●寛容性 (Forgiveness)

●美的完成度 (Aesthetic Integrity)


新たに示されたデザイン原則 (Design Principles 2017)


●行き先の探しやすさ (Wayfinding)

●フィードバック (Feedback)

●視認性 (Visibility)

●一貫性 (Consistency)

●メンタルモデル (Mental Model)

●近接 (Proximity)

●分類 (Grouping)

●マッピング (Mapping)

●アフォーダンス (Affordance)

●段階的開示 (Progressive Disclosure)

●80:20の法則 (80/20 Rule)

●対称性 (Symmetry)

むすび

過去のHIGと現代のHIGを比較してわかったことは、

﹁たった数十年で人間はそう変わらない﹂

ということです。

2017年版のiOS HIGには1987年版のHIGに書かれているデザイン原則が受け継がれています。デバイスや技術が進化したとしても、それらはあくまで人間が使う道具である、ということをよく心に留めておく必要があるのだと思います。

我々はアプリケーションを設計する際に、人間の認知や心理も含めてヒューマンインターフェイスをデザインしなければなりません。デザイン原則はそのことを我々に教えてくれるものです。