インタラクションデザインパターン(1)
80年代のAppleに学ぶUIの部品化とガイドライン
ソシオメディア 上野 学
2007/2/7
80年代のAppleに学ぶUIの部品化とガイドライン |
ソフトウェアのユーザーインターフェイスに関して、その構成要素を体系的に部品化し、状況に応じた用法をユーザーの視点から規定するという取り組みは、1984年にApple Computer社のMacintoshが採用したGUIリソースの管理方法と、追って開発者向けに提供されたユーザーインターフェイスガイドラインの存在によって一般化したといえます。
1985年に出された開発者向けドキュメント『Inside Macintosh』にはすでに「User Interface Guidelines」という章が設けられており、その後この部分は加筆され、独立した書籍としても出版されるようになります。
これらにより開発者は、OSのAPIからシステム標準のGUIの部品(ウィンドウやボタンなど)をすぐに使うことができると同時に、ユーザーにとっての使いやすさを重視した哲学的ともいえるデザイン指針を参照しながら質の高いアプリケーションを開発できるようになったのです。
そもそもGUIというものは、操作の対象や機能を目に見えるオブジェクトとして表現し、それらが外からのイベントに応じて自律的に動くというオブジェクト指向の世界を体現したものですから、各オブジェクトの見た目と振る舞いをパターン化するということは、その世界観を確立するために必要不可欠なことであったともいえます。オブジェクト指向とパターンの相乗効果がここですでに示唆されているのです。
そのため、デザインガイドラインとパターンはかなり近い存在といえますが、一般的にデザインガイドラインとは、画面構成要素のサイズや色、配置位置などを定めた規定集であり、ある要素についての正しい用法と間違った用法を明確にする役割を持ちます。また入出力するデータの型や書式といった細かな外部設計仕様を明示したユーザーインターフェイス標準仕様書などもガイドラインの一種といえるでしょう。
ただし、1987年の「『Human Interface Guidelines: The Apple Desktop Interface』を開いてみると、まず初めに「哲学(Philosophy)」と題された章があり、そこには次のようなことが書かれています。
“コンピュータの設計と人間の活動は互いに影響し合いながら発展するものだと考える必要があります。Apple 社は、人間の行動の詳細の多くが理解されていなくとも、人間が示す反応に着目することが、分かりやすく効率的なコンピュータ環境の設計に役立つと考えています。”
[Apple Computer, Inc.『Human Interface Guidelines: The Apple Desktop Interface(日本語版)』新紀元社]
そしていくつかのデザイン原則の紹介が続いてから、やっと具体的な各GUI要素の解説に入っていくことになります。つまりこのガイドラインでは、単に標準仕様として規定された定量的なルールを示すだけでなく、それらのルールがどういった設計思想から生まれたのかという定性的な価値観の共有を重視しているのです。
UCD(利用者中心設計)とデザインパターン |
デザイン原則やデザインガイドラインは、デザイナーや開発者が「正しい」デザインを行うために不可欠なものです。しかし別のいい方をすれば、原則やガイドラインは、すでにあるデザインを評価するための基準にすぎません。
それを活用するデザイナーや開発者は、たとえ新しい画面を作っているときであっても、「いま作ろうとしているデザインは、ルールに則しているか?」という評価の視点で原則やガイドラインを参照することになります。
評価を重視したデザインノウハウとしては、UCD(User-Centered Design:利用者中心設計)と呼ばれるプロセスが注目されています。このプロセスの特徴は大きく3つあります。
- 分析工程ではエンドユーザーから直接的に要求を引き出すこと
- 設計工程ではプロトタイピングとユーザビリティテストを反復すること
- プロセス全体として、評価と改善を繰り返すスパイラルにすること
UCDが促すのは、現実の要求を正しく理解して優先度付けし、できるだけ早い段階でプロトタイプを作って、それがある程度使い物になるまで何度も評価と改善を繰り返す、という地道な活動です。つまり、良いデザインは、評価プロセスを中心とした試行錯誤によってしか生み出すことができないという考え方です。
ユーザーの要求は多様であり、状況に応じて求められる機能やコンテンツは異なるものなので、この考え方は真理ではあります。しかし一方で、ユーザビリティテストによって発見された問題を改修していくという対症療法的なデザイン手法では、システム全体を秩序立て、その一貫した世界観にユーザーが適応することでより生産性が高まるという効果が軽視されてしまう恐れがあります。
要求分析の手法が確立されたとしても、それは分析であってデザイン(設計)ではありません。分析によって抽象化された要求をどのように合成、計画し、具体的な形にしていくのか。そこには決定的な方法論はありませんが、ユーザーの要求を満たすためのソリューションを創造するのは、デザイン原則を理解したデザイナーであり開発者のセンスです。センスは経験によって磨かれます。では経験を蓄積してベストプラクティスを体系化したらどうなるでしょうか?
“作業に対するニーズというものがユーザーごとに異なっているとしても、ユーザー集団は多くの一般的な心理属性を共有しているのです。つまり、インターフェイス・デザイナーは、アプリケーションの調査や個人差を埋める作業を始める前に、全人類が共通して持っているインターフェイス・デザインに対する要求を活用して、自らの作業量を低減させることができるのです。”
[ジェフ・ラスキン著、村上雅章訳、『ヒューメイン・インターフェイス―人にやさしいシステムへの新たな指針』ピアソン・エデュケーション]
このような考え方は、前述の「コンピュータの設計と人間の活動は互いに影響し合いながら発展する」というApple社のコンセプトにも通じています。そして人々がコンピュータを利用するうえでの典型的なタスク、そしてそのタスクをGUIで実現するための典型的な表現方法を収集して体系化するという試みこそが、インタラクションデザインのパターン言語化にほかなりません。
それらは抽象的なデザイン原則に裏打ちされたものであるのと同時に、どのような制約状況の中でどのような効果を持つのかといった具体的なトレードオフの解法を伴っています。先人の試行錯誤を集約することで、アイデアの再利用性とユーザーにとっての利便性を同時に高めているのです。原則やガイドラインが「評価」のための基準とするならば、パターンは「設計」のためのリファレンスといえるでしょう。
デザイン作業の効率と信頼性を飛躍的に向上させる |
インタラクションの設計にパターンを用いるというアプローチは、デザイン作業の効率と信頼性を飛躍的に向上させる可能性を含んでいます。なぜなら、デザイナーや開発者は、新たに画面を設計する際、やみくもに思い付きのデザインをしてそれをテストするのではなく、パターンの中から状況に適したソリューションを選び取るだけでよいからです。そのソリューションの評価はすでに過去の経験の中で済んでいるので、デザイン作業をすぐに次の段階に進めることができるのです。
もちろんデザイナーや開発者には、独自のソリューションを発明する余地も残されています。またその努力を惜しんでは、インタラクションデザインの発展は限られてしまいます。しかし多くの場合、設計効率とユーザーにとっての利便性を最大化するための近道として、パターンの利用が有効であることは間違いないでしょう。
この連載では、抽象的なものから具象的なものまで、いくつかの実際のインタラクションデザインパターンを紹介しながら、画面設計の効率化とユーザーにとっての利便性向上を両立させる方法を考えていきたいと思います。
2/2 |
INDEX | ||
インタラクションデザインパターン(1) | ||
Page1 インタラクティブメディアのビッグバン ギミックの再利用 ソフトウェア工学におけるパターン |
||
Page2 1985年のAppleに学ぶUIの部品化とガイドライン UCD(利用者中心設計)とデザインパターン デザイン作業の効率と信頼性を飛躍的に向上させる |
関連記事 |
- GASで棒、円、折れ線など各種グラフを作成、変更、削除するための基本 (2017/7/12)
資料を作る際に、「グラフ」は必要不可欠な存在だ。今回は、「グラフの新規作成」「グラフの変更」「グラフの削除」について解説する - GET/POSTでフォームから送信された値をPHPで受け取る「定義済みの変数」【更新】 (2017/7/10)
HTMLのフォーム機能についておさらいし、get/postメソッドなどの内容を連想配列で格納するPHPの「定義済みの変数」の中身や、フォーム送信値の取り扱いにおける注意点について解説します【PHP 7.1含め2017年の情報に合うように更新】 - PHPのfor文&ループ脱出のbreak/スキップのcontinue【更新】 (2017/6/26)
素数判定のロジックからbreak文やcontinue文の利点と使い方を解説。for文を使ったループ処理の基本とwhile文との違い、無限ループなども併せて紹介します【PHP 7.1含め2017年の情報に合うように更新】 - Spreadsheetデータの選択、削除、挿入、コピー、移動、ソート (2017/6/12)
Spreadsheetデータの選択、挿入、削除、コピー、移動、ソートに使うメソッドの使い方などを解説する
|
|